微信小程序上拉加载方案

微信小程序上拉加载

微信小程序提供onReachBottom上拉事件

developers.weixin.qq.com/miniprogram…

思路

当前页和总页数进行对比，判断是否要进行加载。

data: {
    list:null,       //列表
    pageIndex:1,    //请求页码
    pageSize:10,  //每页多少条  
    totalpage:0, //总页数 
  }, 
  

onShow() {
  this.getReceivedListPage()
},


 // 页面上拉触底事件的处理函数
onReachBottom(){
 if (this.data.pageIndex <= this.data.totalpage) {
    this.getReceivedListPage()
  }
},

getReceivedListPage() {

      let page = this.data.pageIndex;
      
      let params = {
          pageIndex: this.data.pageIndex,
          pageSize: this.data.pageSize,
      };
  
      getReceivedListPage(params).then(res => {
      
          page++；
          
          const resData = res.data.data;
          const purification = resData.list.map((a, i) => {
              return {
                  last: page - 1 == resData.pages && i == resData.list.length - 1
                  ? true : false, // 是否是最后一条数据
                  ...a
              }
          })
          
          this.setData({
              totalpage: resData.totalPage,
              [`list[${this.data.pageIndex-1}]`]: purification,
              pageIndex: page
          });
      });
  },

[list[${this.data.pageIndex-1}]] : purification 这种写法是为避免setData数据量过大,list数据在使用时需注意多循环一层 ~

亲测可用 有问题滴滴🙂