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

墨蓝 2023-03-06 05:45 79阅读 0赞

### 一、效果 ###

![format_png][]

已加载全部.png

### 二、步骤 ###

**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)
            })
          }

[format_png]: /images/20230208/50138121fa8e4918a9e2cd1192bc1cbe.png