在小程序中实现分页加载,通常可以使用 scroll-view
组件实现滚动加载。具体实现步骤如下:
wxml
文件中使用 scroll-view
组件,并设置 bindscrolltolower
事件处理函数:<scroll-view scroll-y="true" bindscrolltolower="onScrollToLower">
<!-- 分页内容 -->
</scroll-view>
js
文件中定义 onScrollToLower
事件处理函数,并在该函数中获取下一页数据:Page({
data: {
page: 1, // 当前页码
pageSize: 10, // 每页记录数
list: [] // 列表数据
},
// scroll-view滚动到底部触发的事件处理函数
onScrollToLower() {
const { page, pageSize, list } = this.data;
const nextPage = page + 1;
// 获取下一页数据
this.getData(nextPage, pageSize).then(data => {
this.setData({
page: nextPage,
list: list.concat(data)
});
});
},
// 获取数据
getData(page, pageSize) {
return new Promise(resolve => {
wx.request({
url: 'xxx',
data: { page, pageSize },
success(res) {
resolve(res.data);
}
});
});
}
});
onLoad
生命周期中,调用 getData
函数获取第一页数据:Page({
onLoad() {
const { page, pageSize } = this.data;
// 获取第一页数据
this.getData(page, pageSize).then(data => {
this.setData({
list: data
});
});
},
// ...
});
关键词高亮:scroll-view
、bindscrolltolower
、onScrollToLower
、wx.request
、Promise
。