小程序分页加载

实现思路

页面滚动到底部------->处罚原生的onReachBottom方法------>调用分页接口-------->分页渲染

注意事项

• 小程序setData方法每次更新数据不能太多，更新频率不能太频繁
• 采用二维数组实现

具体的实现方式

初始化变量

data: {
    pageFlag: true, // 分页开关
    pageNumber: 0, // 当前页码
    pageSize: 10, // 每页加载的条数
    hasNextPage: false, // 是否有下一页
    info: [[]], // 请求的数据，采用二维数组
}

触发条件

  onReachBottom() {
    console.log('onReachBottom')
    if (this.data.hasNextPage && this.data.pageFlag) {
      this.search(opt)
    }
  }

分页逻辑

const pageIndex = 1, // 当前的页码
search(opt).then(res => {
    this.setData({
        ['info[' + pageIndex + ']' ]: res.data
      })
})

页面渲染

<view wx:for="{{info}} wx:for-item="pageItem" wx:key="{{index}}">
    <view wx:for="{{pageItem}}" wx:for-item="item">
        <text>{{item.text}}</text>
    </view>
</view>

总结

• 这里的二维数组不用将页面所有的数据进行setData,增加了页面的性能，你可以尝试利用obj的方式实现