小程序 分页 上拉加载

2020-01-14 工作笔记

1、首先在data中定义：当前页，总页数，每页条数

  data: {
    goodsList: [],
    id: '', //当前类别id
    page: 1,   //当前页
    size: 10,  //每页条数
    totalPage: 1, //总页数
    isMore: true  //是否还有更多数据
    noData: ''   //暂无数据
  },

2、获取数据列表

  getGoodsList (id) {
    var that = this;
    //console.log('总页数', that.data.totalPage)
    //console.log('当前页', that.data.page)
    //总页数大于当前页-1，就继续加载下一页数据，否则isMore设为false，表示没有更多数据了。
    if (that.data.totalPage > that.data.page -1) {
      let url = api.GoodsList
      let data = {
        classifyid: id,
        pageNum: that.data.page,
        showNum: that.data.size
      }
      util.request({
        url,
        data
      }).then(res => {
        if (res.code == 200 && res.data) {
          if (res.data.results.length > 0){
            that.setData({
              goodsList: [...that.data.goodsList, ...res.data.results],
              page: that.data.page + 1,
              totalPage: Math.ceil(res.data.total / res.data.showNum)
            });
          }else{
            that.setData({
              noData: '暂无数据'
            })
          }
        }
      });
    }else{
      that.setData({
        isMore: false
      })
    }
  },

3、初次进来，在onload周期函数中初始化数据

onLoad: function (options) {
  if (options.id){
      let id = options.id
      this.getGoodsList(id)
      this.setData({
         id
      })
  }
}

4、在页面上拉触底事件的处理函数onReachBottom中，实现上拉加载功能

onReachBottom: function () {
  this.getGoodsList(this.data.id)
}

以上。