微信小程序在setData时会有一个传输上限，如果按照常规加载，每次数据来了都concat，会导致传输的数据越来越大。所以我们这次加载采用分页加载的方式，页面中的列表数据使用二维数组。

作为对比，我们每项的数据为一个{}
之前的数据格式是 --> listData: [{},{},{}, ....]
现在分页之后的二维数据 --> listData: [[{},{},{},{}],[{},{},{},{}]....]

这样的话，我们每次setData时只需要set当前那页的数据即可。

代码 ⬇️：页面中使用scroll-view的话，我个人的习惯会先给容器一个固定高度，在json文件中将disabledScroll设置为true（因为使用了自定义的navigationBar，阻止页面的滑动会避免滑动页面带着navBar一起走）。我这里设置的容器高度与页面一样，为100%。

wxml：

<view class="page-container" style="{{pageHeight}};{{pageTop}}">
  <scroll-view scroll-y style="width: 100%; height: 100%;" bindscrolltolower="toBottom">
    <view class="list-container">
      <block wx:for="{{listData}}" wx:for-item="list" wx:key="index">
        <block wx:for="{{list}}" wx:key="id">
          <view class="list-card" style="{{cardWidth}};{{cardMargin}}">
            <image src="{{item.coverUrl}}" mode="widthFix" class="image" />
            <view class="list-card_title">{{item.title}}</view>
          </view>
        </block>
      </block>
    </view>
  </scroll-view>
</view>

wxss:

.list-container {
  display: flex;
  flex-wrap: wrap;
}
.list-card {
  width: 45%;
  margin-left: 20px;
  border: 1px solid #000;
}
.image {
  display: block;
  width: 100%;
}

js:

  /**
   * 页面的初始数据
   */
  data: {
    listData: [],
    pagination: {
      pageNumber: 1,
      pageSize: 7
    }
  },
  setPageHeight() {
    // 这个方法作用是设置容器的样式，我用到utils里的方法，懒得粘贴了😂请自行调试
    this.setData({
      pageHeight,
      pageTop: `margin-top: ${navHeight}px;`
    })
  },
  async getList() {
    // 获取数据的方法
    const {workList} = await getWorkList(this.data.pagination);
    this.setData({
      [`listData[${this.data.pagination.pageNumber - 1}]`]: workList
    })
    // 一下代码项目不用，只是为了展示数据
    const currentPageNumber = this.data.pagination.pageNumber;

    console.log(`单次传输的数据,第${currentPageNumber}页 ---- `,workList);
    console.log(`页面中渲染的数据,第${currentPageNumber}页 ---- `,this.data.listData);
  },
  toBottom() {
    this.setData({
      ['pagination.pageNumber']: this.data.pagination.pageNumber + 1
    })
    this.getList();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.setPageHeight()
      this.getList()
  },

这样一个分页的列表就做好啦～我们可以看一下每次传输的数据以及页面中渲染的数据格式 ⬇️

tada~~~~一个可以在微信小程序中使用的分页加载列表就做好啦💃