微信小程序：实现数据默认10条，然后向下滑动每次加载10条数据

今天我们来分享一个微信小程序小应用。功能：实现数据默认10条，然后向下滑动每次加载10条数据。

废话不多说，我们直接开始吧。

功能主要有三个要点：

1、接口返回的页数

2、每页的条数

3、总数

我们可以看下DEMO，如下：

Page({
  data: {
    dataList: [], // 数据列表
    pageNum: 1, // 当前页码
    pageSize: 10, // 每页数据数量
    isLoading: false, // 是否正在加载数据
    hasMore: true // 是否还有更多数据
  },

  onLoad: function() {
    this.loadData();
  },

  // 加载数据
  loadData: function() {
    if (this.data.isLoading || !this.data.hasMore) {
      return;
    }

    this.setData({
      isLoading: true
    });

    // 发起请求获取数据
    wx.request({
      url: '/path/to/api',
      data: {
        pageNum: this.data.pageNum,
        pageSize: this.data.pageSize
      },
      success: res => {
        // 处理返回的数据
        const newDataList = res.data.dataList;

        this.setData({
          dataList: this.data.dataList.concat(newDataList),
          pageNum: this.data.pageNum + 1,
          hasMore: newDataList.length >= this.data.pageSize,
          isLoading: false
        });
      },
      fail: () => {
        this.setData({
          isLoading: false
        });
      }
    });
  },

  // 刷新数据
  refreshData: function() {
    this.setData({
      dataList: [],
      pageNum: 1,
      hasMore: true
    });

    this.loadData();
  },

  // 触底加载更多数据
  loadMoreData: function() {
    this.loadData();
  }
});

当然，这个是需要组件的，我们可以用微信小程序默认的onPullDownRefresh函数和onReachBottom()函数代替上面的。