很多时候在前后台交互过程中，后端返回数据未进行分页，此时需要我们在前端实现分页加载，以保证前端页面加载的流畅性，一次性多数据直接渲染，会导致页面卡顿，甚至白屏等问题。

实现思路：根据返回的数据量计算分页页数，上滑时进行数据截取及组装显示即可。

代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
      
    pageNum: 1,  // 当前页码
    pageSize: 10,    // 分页条数
    taskPages: 0,    // 计算后的分页页码数
    dataAll: [],    // 所有数据
    dataArr: [],    // 当前数据
    
  },

  /**
   * 异步请求方法
   * common.wechatRequest为小程序HTTPS网络请求（wx.request）封装函数，可自行更换
   * common.showToast为小程序消息提示框（wx.showToast）封装函数，可自行更换
   */
  getTestInfo() {
    let { pageNum, pageSize } = this.data;
    common.wechatRequest(config.API.TEST_INFO, null, 'get', null).then((res) => {
      if(res.code == 200){
        let datas = res.data;
        if(datas.length > 0){
          let dataNow = [];
          // 对比数据量是否大于分页条数(pageSize)
          if(datas.length > pageSize){
            // 数据量大于分页条数10，取前10条显示
            dataNow = datas.slice(pageNum - 1, pageSize);
          }else{
            // 数据量小于分页条数，全部显示
            dataNow = datas;
          }
          // Math.ceil为向上取整数计算：此处为所有数据量按照每页10条数据，计算出分页页数
          // 此处也可使用取模计算(%)分页页数
          this.setData({
            dataAll: datas,
            dataArr: dataNow,
            taskPages: Math.ceil(datas.length / pageSize)
          });
        }else{
          // 无数据处理...
        }
      }else{
        common.showToast(res.msg);
      }
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    let that = this;
    if(that.data.taskPages > 0){
      let page = that.data.pageNum;
      that.setData({pageNum: page + 1});
      if(that.data.pageNum > that.data.taskPages){
        wx.showToast({title: '没有更多内容',icon: 'none'});
        that.setData({pageNum: that.data.taskPages});
      }else{
        // 根据累加分页数取出数据，更新视图
        let num = (that.data.pageNum - 1) * that.data.pageSize;
        let num2 = num + that.data.pageSize;
        let newArr = that.data.dataAll.slice(num, num2);
        let nowArr = that.data.dataArr.concat(newArr);
        that.setData({ dataArr: nowArr });
      }
    }
  }
})