微信小程序分页经典实用案例简洁明了3步完成

1.在data中声明好需要用到的变量

  data: {
    List: [],// 列表
    page: 1, // 当前页码 
    size: 5, // 每页条数 
    loading: false, // 是否在加载中 
    hasMore: true // 是否还有更多数据 
  }

2.封装好查询数据的方法

 // 查询签收记录
  getList() {
    let that = this;
    //加载中或者没有更多数据的时候直接return
    if (that.data.loading || !that.data.hasMore) return;
    // 开始加载 
    that.setData({
      loading: true
    });
    wx.showLoading({
      title: '数据加载中...',
    })
    request({
      url: "/api/xxx/",
      data: {
        pageNum: that.data.page,
        pageSize: that.data.size
      }
    }, "GET").then(res => {
     // 如果列表数目等于每页条数，说明还有更多数据
      const hasMore = res.data.length === that.data.size;
      // 更新列表(使用concat来合并列表)和状态 
      that.setData({
        List: that.data.List.concat(res.data),
        page: that.data.page + 1,
        loading: false,
        hasMore: hasMore
      })
      wx.hideLoading();
    })
  },

3.触底事件中检查是否还有更多数据,有就调用查列表的方法

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.hasMore) {
      this.getList();
    }
  }