微信小程序使用onreachBottom实现页面触底加载及分页效果

getSupplyList(reachBottom) {//参数表示是否为触底下拉加载数据
    wx.showLoading({
      title: '加载中...',
    });
    let that = this;//在回调甘薯里,this有时候不能直接用,防止出bug所初始化一个that
    util.request(api.SupplyList, {//发送请求
      type: that.data.type,
      page: that.data.page,
      limit: that.data.limit,
      searchValue: that.data.searchValue//请求的四个参数
    }).then(function (res) {
      console.log(that.data.page);
      if (res.errno === 0) {//为0请求成功
        let supplyList = res.data.list.map(item => {
          item.dueTime = util.formatTime2(new Date(item.dueTime), "Y/M/D");//设置日期格式
          item.herbListImage && (item.herbListImage01 = item.herbListImage.split(',')[0])//设置获取的图片列表
          item.companyLogo = item.companyLogo || item.avatar;
          item.companyName = item.companyName || item.nickname;
          return item;//将这一条数据返回supplyList并保存
        });
        //触底加载新数据并保留老数据
        if (reachBottom) {
          supplyList = [...that.data.supplyList, ...supplyList]//将新数据加入老数据中
        }
        that.setData({//将获取的值赋值给data中的数组和总页数
          supplyList: supplyList,
          totalPages: res.data.pages
        });
        that.data.page++//所有操作完成后页数加一
        wx.hideLoading();
      }
    }).finally(() => {
      wx.hideLoading();
    });
  },

  onReachBottom() {//触底加载事件
    if (this.data.totalPages > this.data.page) {//判断当前也是否小于总页数
      this.setData({
        page: this.data.page + 1//当前页加一
      });
    } else {
      return false;
    }
    this.getSupplyList(true);//调用方法
  },