小程序触底分页加载数据
时间: 2023-09-30 18:08:27 浏览: 51
小程序的触底分页加载数据可以通过监听页面滚动事件来实现。
1. 在页面的onLoad生命周期函数中,初始化一个变量page,表示当前页面的页数,初始值为1。
2. 在页面的onReachBottom生命周期函数中,判断当前页面是否已经加载完所有数据,如果是,则直接返回;如果不是,则将page加1,发送请求获取下一页数据,并将新数据合并到原有数据数组中。
3. 在页面中渲染数据时,使用wx:for循环遍历数据数组。
以下是示例代码:
```
Page({
data: {
dataList: [], // 数据数组
page: 1, // 当前页数
hasMoreData: true // 是否还有更多数据
},
onLoad() {
this.loadData()
},
onReachBottom() {
if (!this.data.hasMoreData) return;
this.setData({
page: this.data.page + 1
})
this.loadData()
},
loadData() {
wx.request({
url: 'https://xxx.com/api/data',
data: {
page: this.data.page
},
success: res => {
const newData = res.data.dataList
const totalData = this.data.dataList.concat(newData)
const hasMoreData = newData.length > 0
this.setData({
dataList: totalData,
hasMoreData: hasMoreData
})
}
})
}
})
```
在这个示例中,我们将数据请求放在了loadData函数中,当页面加载时和触底时都会调用该函数。请求返回后,将新数据合并到原有数据数组中,并判断是否还有更多数据,如果没有,则将hasMoreData改为false,避免继续请求。
在实际开发中,根据接口返回的数据格式和需要展示的数据结构,代码可能会有所不同,需要根据具体情况进行调整。