无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况,那么做这个懒加载就很简单了。
一、首先,固定一个包含列表数据的view高度,让它里面列表的数据溢出可以滚动:
Item{ {item}}
二、那么列表的数据请求就会分成两种情况:一种是初始化页面加载的第一页的数据;一种是滚动到底部请求的下一页的数据。所以我们在请求时要分成两种情况,若是第一页,isPage=false,下一页的数据isPage=true:
//请求数据
getData(isPage) {
console.log("需要拼接数据:", Network.pageData);
let params = {
pageNum: this.data.pageNo,
pageSize: 30
}
//请求
Network.pageData(params,(res,err)=>{
if (isPage) {
//下一页的数据拼接在原有数据后面
this.setData({
listData: this.data.listData.concat(res.result)
})
} else {
//第一页数据直接赋值
this.setData({
listData: res.result
})
}
})