实现思路
页面滚动到底部------->处罚原生的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的方式实现