WeChat 애플릿에서 페이징 드롭다운 로딩을 구현하기 위한 예제 코드

高洛峰
풀어 주다: 2017-03-21 16:23:45
원래의
3680명이 탐색했습니다.

눈 깜짝할 사이에 WeChat 미니 프로그램 시리즈에 이미 10개의 코스가 있습니다. 무겁고 어린 소녀도 이 튜토리얼 시리즈를 얼마나 오랫동안 계속할 수 있을지 모르겠습니다. 모든 튜토리얼이 모든 사람에게 정말 도움이 되기를 바랍니다. 이번 강의에서 소개할 내용은 페이징 드롭다운 로딩 구현 방법입니다. 먼저 렌더링을 살펴보겠습니다

WeChat 애플릿에서 페이징 드롭다운 로딩을 구현하기 위한 예제 코드

<view class="copyright">
    <view class="copyright_item">CopyRight:All Right Reserved</view>
    <view class="copyright_item">原创作者:51小程序</view>
    <view class="copyright_item">微信小程序开发者社区</view>
    <view class="copyright_item">HTML51.COM</view>
    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
    <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入下拉加载演示页面</button></view>
</view>
로그인 후 복사

사용자가 페이지를 열면 엄청난 양의 배경 데이터가 있다고 가정할 때 모든 데이터가 한꺼번에 클라이언트에 반환되며, 페이지 열기 속도는 속도가 느려지고, 사용자가 다음 콘텐츠를 보지 않고 위 콘텐츠만 읽는 것도 사용자 트래픽 낭비입니다. 사용자가 아래로 스크롤해야 할 때 백그라운드에서 모든 데이터를 한꺼번에 반환해서는 안 됩니다. 더 많은 데이터를 로드하세요.
비즈니스 요구 사항:
목록을 스크롤할 때 하단에서 계속 위로 당겨 더 많은 콘텐츠를 로드하세요.
필수 매개변수:
(1) pageindex: 1 //로드 횟수
(2)callbackcount: 15 //需要返回数据的个数
其他参数:
根据接口的所需参数
实现原理:
当第一次访问接口时,传递2个必备参数(第1次加载,需要返回数据的个数为15个),和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来。在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把“上拉加载”显示在列表底部;否,则没有数据可取,并把“没有更多”显示在列表底部,同时把“上拉加载”隐藏掉。
当用户已经滚动到列表底部(这里使用到小程序提供的scroll-view组件的bindscrolltolower事件),触发bindscrolltolower事件,参数pageindex+1,再把2个必备参数(第2次加载,需要返回数据的个数为15个)和其他参数(需要搜索的字符串)给后台,后台把其余的数据返回给前台,前台在原来数据的基础上添加数据


主要的页面结果如下:
1.index.wxml

<view class="search"> 
  <view class="search-bar"> 
    <view class="search-wrap"> 
        <icon type="search" size="16" class="icon-search" /> 
        <input type="text" placeholder="请输入搜索内容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" /> 
    </view> 
    <view class="search-cancel" bindtap="keywordSearch">搜索</view> 
  </view> 
  <view class="search-result"> 
    <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower"> 
      <view class="result-item" wx:for="{{searchSongList}}" wx:key="unique"  data-data="{{item}}" > 
        <view class="icon{{item.isonly==&#39;0&#39; ? &#39; nocopyright&#39; : &#39;&#39;}}"></view> 
        <text class="title">{{item.songname}}</text> 
        <view class="subtitle"> 
          <text wx:for="{{item.singer}}" wx:key="unique">{{item.name}}</text> 
        </view> 
      </view> 
      <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view> 
      <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view> 
    </scroll-view>   
  </view> 
</view>
로그인 후 복사

2.index.wxss

page{ 
  display: flex;  
  flex-direction: column;  
  height: 100%;  
} 
   
/*搜索*/ 
.search{ 
  flex: auto;  
  display: flex;  
  flex-direction: column;  
  background: #fff;  
} 
.search-bar{ 
  flex: none;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 20rpx;  
  background: #f4f4f4;  
} 
.search-wrap{ 
  position: relative;  
  flex: auto;  
  display: flex;  
  align-items: center;  
  height: 80rpx;  
  padding: 0 20rpx;  
  background: #fff;  
  border-radius: 6rpx;  
} 
.search-wrap .icon-search{ 
  margin-right: 10rpx;  
} 
.search-wrap .search-input{ 
  flex: auto;  
  font-size: 28rpx;  
} 
.search-cancel{ 
  padding: 0 20rpx;  
  font-size: 28rpx;  
} 
   
/*搜索结果*/ 
.search-result{ 
  flex: auto;  
  position: relative;  
} 
.search-result scroll-view{ 
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  top: 0;  
} 
.result-item{ 
  position: relative;  
  display: flex;  
  flex-direction: column;  
  padding: 20rpx 0 20rpx 110rpx;  
  overflow: hidden;  
  border-bottom: 2rpx solid #e5e5e5;  
} 
   
.result-item .media{ 
  position: absolute;  
  left: 16rpx;  
  top: 16rpx;  
  width: 80rpx;  
  height: 80rpx;  
  border-radius: 999rpx;  
} 
.result-item .title, 
.result-item .subtitle{ 
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
  line-height: 36rpx;  
} 
.result-item .title{ 
  margin-bottom: 4rpx;  
  color: #000;  
} 
.result-item .subtitle{ 
  color: #808080;  
  font-size: 24rpx;  
} 
.result-item:first-child .subtitle text{ 
  margin-right: 20rpx;  
} 
.result-item:not(:first-child) .subtitle text:not(:first-child):before{ 
  content: &#39;/&#39;;  
  margin: 0 8rpx;  
} 
.loading{ 
  padding: 10rpx;  
  text-align: center;  
} 
.loading:before{ 
  display: inline-block;  
  margin-right: 5rpx;  
  vertical-align: middle;  
  content: &#39;&#39;;  
  width: 40rpx;  
  height: 40rpx;  
  background: url(../index/images/icon-loading.png) no-repeat;  
  background-size: contain;  
  animation: rotate 1s linear infinite;  
} 
.loading.complete:before{ 
  display: none;  
}
로그인 후 복사

3.index.js

var util = require(&#39;../../utils/util.js&#39;) 
Page({ 
  data: { 
    searchKeyword: &#39;&#39;,  //需要搜索的字符  
    searchSongList: [], //放置返回数据的数组  
    isFromSearch: true,   // 用于判断searchSongList数组是不是空数组,默认true,空的数组  
    searchPageNum: 1,   // 设置加载的第几次,默认是第一次  
    callbackcount: 15,      //返回数据的个数  
    searchLoading: false, //"上拉加载"的变量,默认false,隐藏  
    searchLoadingComplete: false  //“没有数据”的变量,默认false,隐藏  
  }, 
  //输入框事件,每输入一个字符,就会触发一次  
  bindKeywordInput: function(e){ 
    console.log("输入框事件") 
    this.setData({ 
      searchKeyword: e.detail.value 
    }) 
  }, 
  //搜索,访问网络  
  fetchSearchList: function(){ 
    let that = this;  
    let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数  
        searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数  
        callbackcount =that.data.callbackcount; //返回数据的个数  
    //访问网络  
    util.getSearchMusic(searchKeyword, searchPageNum,callbackcount, function(data){ 
      console.log(data) 
      //判断是否有数据,有则取数据  
      if(data.data.song.curnum != 0){ 
        let searchList = [];  
        //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加  
        that.data.isFromSearch ? searchList=data.data.song.list : searchList=that.data.searchSongList.concat(data.data.song.list) 
        that.setData({ 
          searchSongList: searchList, //获取数据数组  
          zhida: data.data.zhida, //存放歌手属性的对象  
          searchLoading: true   //把"上拉加载"的变量设为false,显示  
        });  
      //没有数据了,把“没有数据”显示,把“上拉加载”隐藏  
      }else{ 
        that.setData({ 
          searchLoadingComplete: true, //把“没有数据”设为true,显示  
          searchLoading: false  //把"上拉加载"的变量设为false,隐藏  
        });  
      } 
    }) 
  }, 
  //点击搜索按钮,触发事件  
  keywordSearch: function(e){ 
    this.setData({   
      searchPageNum: 1,   //第一次加载,设置1 
      searchSongList:[],  //放置返回数据的数组,设为空  
      isFromSearch: true,  //第一次加载,设置true 
      searchLoading: true,  //把"上拉加载"的变量设为true,显示  
      searchLoadingComplete:false //把“没有数据”设为false,隐藏  
    }) 
    this.fetchSearchList();  
  }, 
  //滚动到底部触发事件  
  searchScrollLower: function(){ 
    let that = this;  
    if(that.data.searchLoading && !that.data.searchLoadingComplete){ 
      that.setData({ 
        searchPageNum: that.data.searchPageNum+1,  //每次触发上拉事件,把searchPageNum+1 
        isFromSearch: false  //触发到上拉事件,把isFromSearch设为为false 
      });  
      that.fetchSearchList();  
    } 
  } 
})
로그인 후 복사


위 내용은 WeChat 애플릿에서 페이징 드롭다운 로딩을 구현하기 위한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿