小程序分页加载

简易版的数据分页加载,滚动加载下一页

初始数据:

  data: {
    page: 1, // 第几页
    hasMoreData: true, // 下一页是否还有新数据(默认有下一页数据)
    dataList: [] // 数据列表
  }

如果接口会返回类似标志字段这里就不用自己定义了。

新页加载事件:

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(!this.data.hasMoreData) {
      return;
    }
    this.data.page ++;
    wx.showLoading({
      title: '',
      mask: true
    })
    this.getDataList();
  }

如果还有新数据,将页数加一,请求接口获取下一页数据,否则返回。

请求接口

  // 获取数据列表
  getDataList() {
    if (!this.data.hasMoreData) {
      return;
    }
    const params = {
      id: this.options.id,
      page: this.data.page
    }
    return app.$api.getDataList(params).then(res => {
      if (res.status == 1) {
        let resData = res.data || [];
        if (!resData.length) {
          this.setData({
            hasMoreData: false
          })
        }
        resData = this.data.complainList.concat(resData);
        this.setData({
          dataList: resData
        })
        wx.hideLoading();
      }
    })
  }

将当前数据列表与新的返回数据进行连接操作,渲染新列表。如果没有新数据将
hasMoreData设置为false,避免下拉到底一直请求接口。

有tab切换时要重置数据

posted @ 2019-11-13 14:48  Li_pk  阅读(197)  评论(0编辑  收藏  举报