列表页面几乎是小程序标配,今天实现下拉刷新 + 上拉加载更多,代码可直接复制使用。
一、页面配置
java
{
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
二、js 逻辑
javascript
Page({
data: {
list: [],
page: 1,
size: 10
},
onLoad() {
this.getList()
},
// 获取列表
async getList() {
// 这里替换为真实接口
const res = { data: Array(10).fill(0) }
this.setData({
list: this.data.page === 1 ? res.data : [...this.data.list, ...res.data]
})
},
// 下拉刷新
onPullDownRefresh() {
this.setData({ page: 1, list: [] })
this.getList().then(() => wx.stopPullDownRefresh())
},
// 上拉加载
onReachBottom() {
this.setData({ page: this.data.page + 1 })
this.getList()
}
})
总结:配置 + 逻辑分离,结构清晰,适配绝大多数商品列表、资讯列表场景。