微信小程序上拉加载更多
无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况,那么做这个懒加载就很简单了。
一、首先,固定一个包含列表数据的view高度,让它里面列表的数据溢出可以滚动
<scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;">
<view wx:for="{
{listData}}" wx:key="{
{index}}" style="height: 40px;line-height: 40px;border-bottom: 1px solid #f4f4f4;">
Item{
{
item}}
</view>
</scroll-view>
二、那么列表的数据请求就会分成两种情况:一种是初始化页面加载的第一页的数据;一种是滚动到底部请求的下一页的数据。所以我们在请求时要分成两种情况,若是第一页,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
})
}
})
},
三、步骤一提到的固定高度的view
,它在往上滚动的时候,滚动到一定的位置便请求下一页的数据。我这里设置了当view
距离到底部还有100px
时,触发请求下一页的数据:
//到达底部
scrollToLower: function (e) {
this.setData({
pageNo: this