【微信小程序】实现分页加载

一、效果

二、步骤

1. wxml中

<view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>  
<view class="loading" hidden="{{!searchLoadingComplete}}">已加载全部</view>

---

2. wxss中

.loading{  
  padding: 10rpx;  
  font-size: 26rpx;
  color:#666;
  text-align: center;  
}

---

3. json文件中，开启下拉刷新

{
  "usingComponents": {},
  "navigationBarTitleText": "日常管理",
  "enablePullDownRefresh": true
}

---

4. js中

①添加这几个变量

data: {
    pageNo: 1, // 设置加载的第几次，默认是第一次  
    pageSize: 10, //返回数据的个数  
    searchLoading: false, //"上拉加载"的变量，默认false，隐藏  
    searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏  
  },

②加载数据方式用下拉的方式

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.startPullDownRefresh();
  },

③相关函数处理

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    this.setData({
      pageNo: 1,
      storelist:[],
      searchLoading: true, //"上拉加载"的变量，默认false，隐藏  
      searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏  
    })
    this.getShopList();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (!this.data.searchLoadingComplete){
      var currentPageNo = this.data.pageNo;
      this.setData({
        pageNo: currentPageNo + 1,

      })
      this.getShopList();
    }
  },

④请求参数中加入

'pageNo': _this.data.pageNo,
'pageSize': _this.data.pageSize,

⑤请求成功处理回调

function(result) {
        if (_this.data.pageNo==1){
          wx.stopPullDownRefresh();//下拉刷新收起来
        }
        console.log('success', result.retailList);
        if (result.retailList.length<_this.data.pageSize){//小于个数，表示没有更多了
          _this.setData({
            searchLoading: false,
            searchLoadingComplete :true
          })
        }
        _this.setData({
          storelist: _this.data.storelist.concat(result.retailList)
        })
      }