微信小程序 页面上拉触底事件的处理函数（分页数据加载）

想要代码优化的，不采坑的可以直接用第三个方法！！！

前面是比较详细的解释，和过程，我是优化了3次，有时间可以仔细看，着急可以直接用第三个方法。

首先，先在onReachBottom（页面上拉触底事件的处理函数）上拉监听里面尝试可不可以运用它，如果可以了，就可以开始编写了！

onReachBottom: function () {
console.log("666666")
}

一、先在data里面定义

page:就是你后台数据的页面变量；

pageData:就是你的页面数据的变量；

clockresult：就是你的后端渲染出来的数据定义一个数组来存放；

 然后封装一个函数：

 clockData(){
    var _this = this
    wx.request({
      url: '你的后端接口?page='+this.data.page+'&页面条数=15&self=false', //url
//this.data.page就是你定义的page

      method: 'GET', //请求方式
      header: {
        'content-type': 'application/json'
      }, // 设置请求的 header
      
      success: function (res) {
        _this.setData({
          clockresult: res.data.obj.records,   //这是你的数据渲染出来给clockresult数组
          pageData: res.data.obj.pages   //这是你pages,总页数给到pageData
        });
      },
      fail: function () {
        app.consoleLog("请求数据失败");
      },
      complete: function () {
      }
    })
  },

给初次页面渲染调用上面封装的接口：

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.clockData();//page=1时的数据渲染
  },

这里的话，第一页的数据就出来了 

二、接着给在第一页的数据基础上，上拉到底部，自动加载第二页数据：

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.setData({
      page:this.data.page+1,  //给页数增加
    })
    if (this.data.page <= this.data.pageData){   //判断页数增加后小于总页数的话，可以执行下面的数据加载
      var _this = this
      wx.request({
        url: '你的后端接口?page=' + this.data.page + '&页面数据条数=15&self=false', //url
        method: 'GET', //请求方式
        header: {
          'content-type': 'application/json'
        }, // 设置请求的 header

        success: function (res) {
         // debugger
          _this.data.pageData = res.data.obj.pages   //获得了第二页
          var listData = _this.data.clockresult;   //定义一个数组，把clockresult第一页的数据赋值给数组
          for (var i = 0; i < res.data.obj.records.length; i++){//利用for循环来加载数据
            listData.push(res.data.obj.records[i]);  //把第二页的数据push进数组
          }
          _this.setData({
            clockresult: listData ,
            pageData: res.data.obj.pages
          });
        },
        fail: function () {
          app.consoleLog("请求数据失败");
        },
        complete: function () {
        }
      })
    }else{
      console.log("没有数据")
    }
   
  },

参考文档：https://segmentfault.com/a/1190000011864114

 

二、以上是我之前的写法，有一点不好的问题就是一旦加载过慢或者再次上拉触底就会重新加载，这样就会导致一直出现“加载中...“的icon，所以后面改进了一下：

把wxml里面的loading不用了：

在js的上拉触底的事件里面加上：

 就可以出现这样的效果，然后自动加载下一页的数据，就算再次上拉也不会一直出现“加载...”的loading了：

三、再次改进，简化代码达到一样的效果

主要是js的优化：

//渲染第一页数据出来
 onLabelValue(currentPage) {
    network.wxRequest('自己的后端url?pageNo=' + currentPage+'&pageSize=90', 'GET').then(res => {
//network.wxRequest这个是因为封装好了前面一部分的接口，没有封装直接就用wx.request就可以了呢
      let label = this.data.labels.concat(res.data.object.records);
//不断的把下一页的数据加到数组里面，上面这句很重要
      if (res.data.code === '200') {
        console.log()
        this.setData({
          labels: label,
          pages: res.data.object.pages,  //获取接口里面的总页数
          currentPage:res.data.object.current  //当前页数
        })
      }
      wx.hideLoading();
    }).catch(res => {
      wx.hideLoading();
    });
  },

在上拉触底的事件中：

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let currentPage = parseInt(this.data.currentPage) + 1;
    if (parseInt(this.data.pages) + 1 > currentPage) {
      this.onLabelValue(currentPage)  //直接调用方法，很便捷，只要传递currentPage页码就可以了
      wx.showToast({
        title: '加载成功',
        duration: 1500,//显示时长
        mask: true,//是否显示透明蒙层，防止触摸穿透，默认：false  
        icon: 'success', //图标，支持"success"、"loading" 
      })
    } else {
      this.setData({
        bottomShow: true
      })
    }

  },

data: