Example code for implementing paging drop-down loading in WeChat applet

In a blink of an eye, we teach you微信小program The series already has ten series of courses. The daily work pressure is heavy, and the little woman is also I don’t know how long I can continue with this series of tutorials. I just hope that every tutorial is really helpful to everyone. What we are going to introduce in this lesson is how to implement paging drop-down loading. Let’s first look at the rendering

##

<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>

When a user opens a page, assuming that the amount of background data is huge, all data is returned to the client at once, and the opening speed of the page will decrease, and the user When you only read the above content without looking at the following content, it also wastes user traffic. From an optimization perspective, the background should not return all the data at once. When the user needs to scroll down, load more data. .

Business requirements:

When the list scrolls to the bottom , continue to pull up to load more content

Required parameters:

（1）pageindex: 1 //How many times to load

（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: '/';  
  margin: 0 8rpx;  
} 
.loading{ 
  padding: 10rpx;  
  text-align: center;  
} 
.loading:before{ 
  display: inline-block;  
  margin-right: 5rpx;  
  vertical-align: middle;  
  content: '';  
  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('../../utils/util.js') 
Page({ 
  data: { 
    searchKeyword: '',  //需要搜索的字符  
    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();  
    } 
  } 
})

The above is the detailed content of Example code for implementing paging drop-down loading in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn