无论是微信小程序还是其他前端框架，都会遇到上拉加载（懒加载）和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况，那么做这个懒加载就很简单了。
一、首先，固定一个包含列表数据的div高度，让它里面列表的数据溢出可以滚动：
<div class="content" style="height: 100%;overflow: auto;" (scroll)="scrollBottom($event)">
<div class="list" *ngFor="let item of listData">{{item}}</div>
</div>
二、那么列表的数据请求就会分成两种情况：一种是初始化页面加载的第一页的数据；一种是滚动到底部请求的下一页的数据。所以我们在请求时要分成两种情况，若是第一页，isPage=false，下一页的数据isPage=true：
getData(isPage){
console.log("需要拼接数据：",isPage);
let params = {
pageNum: this.pageNo,
pageSize: 10
}
//请求
this.service.pageData(path).then(res=>{
if(isPage){
//下一页的数据拼接在原有数据后面
this.listData = this.listData.concat(res.result);
}else{
//第一页数据直接赋值
this.listData = res.result;
}
})
}
三、步骤一提到的固定高度的div，它在往上滚动的时候，滚动到一定的位置便请求下一页的数据。我这里设置了当div距离到底部还有100px时，触发请求下一页的数据：
scrollBottom(e){
let offsetH = e.target.offsetHeight;
let scrollT = e.target.scrollTop;
let height = e.target.scrollHeight;
//div 距离底部 = 列表的总高度 -（滚动的距离 + 窗口可视高度）
let bottom = height - (scrollT + offsetH);
// console.log(offsetH,scrollT,height,bottom);
if(bottom < 100){
this.pageNo = this.pageNo + 1;
this.getData(true);
}
}
四、以上便是基本的上拉加载。通过以上步骤会出现几个问题，下面提供解决方法：
1、滚动离底部<100px之后，继续往底部滚动会一直发起请求。我们需要在div距离到底部还有100px时,设置一个全局变量getBottom，告诉大家我已经发起请求了，等我请求返回的数据展示到页面之后才可以再次发起请求。将步骤三的代码改成以下：
//列表滚动
scrollBottom(e){
let offsetH = e.target.offsetHeight;
let scrollT = e.target.scrollTop;
let height = e.target.scrollHeight;
//div 距离底部 = 列表的总高度 -（滚动的距离 + 窗口可视高度）
let bottom = height - (scrollT + offsetH);
// console.log(offsetH,scrollT,height,bottom);
if(bottom < 100 && !this.getBottom){
this.getBottom = true;
this.pageNo = this.pageNo + 1;
this.getData(true);
}
}
步骤二的代码改为：
getData(isPage){
console.log("需要拼接数据：",isPage);
var params = {
pageNum: this.pageNo,
pageSize: 5
}
//请求
this.service.pageData(path).then(res=>{
//请求返回数据后
this.getBottom = false;
if(isPage){
//下一页的数据拼接在原有数据后面
this.listData = this.listData.concat(res.result);
}else{
//第一页数据直接赋值
this.listData = res.result;
}
})
}
2、如果最后一页的数据都请求完了，再继续往下滚动还会发起请求。设置一个全局变量noMore，当我请求返回的数组长度为0时，滚动到底部就不用再发起请求了。将步骤三的代码改成以下：
//列表滚动
scrollBottom(e){
let offsetH = e.target.offsetHeight;
let scrollT = e.target.scrollTop;
let height = e.target.scrollHeight;
//div 距离底部 = 列表的总高度 -（滚动的距离 + 窗口可视高度）
let bottom = height - (scrollT + offsetH);
// console.log(offsetH,scrollT,height,bottom);
if(bottom < 100 && !this.getBottom && !this.noMore){
this.getBottom = true;
this.pageNo = this.pageNo + 1;
this.getData(true);
}
}
步骤二的代码改为：
getData(isPage){
console.log("需要拼接数据：",isPage);
var params = {
pageNum: this.pageNo,
pageSize: 5
}
//请求
this.service.pageData(path).then(res=>{
//请求返回数据后
this.getBottom = false;
if(isPage){
//下一页的数据拼接在原有数据后面
this.listData = this.listData.concat(res.result);
}else{
//第一页数据直接赋值
this.listData = res.result;
}
//如果返回的数据为空，那么就没有下一页了
if( res.result.length == 0){
this.noMore = true;
}
})
}
五、我们接下来完善请求失败的情况，步骤二的代码改为：
getData(isPage){
console.log("需要拼接数据：",isPage);
var params = {
pageNum: this.pageNo,
pageSize: 5
}
//请求
this.service.pageData(path).then(res=>{
//请求返回数据后
this.getBottom = false;
if(res.status == 'SUCCESS'){
if(isPage){
//下一页的数据拼接在原有数据后面
this.listData = this.listData.concat(res.result);
}else{
//第一页数据直接赋值
this.listData = res.result;
}
//如果返回的数据为空，那么就没有下一页了
if(res.result == undefined || res.result.length == 0){
this.noMore = true;
}
return;
}
//返回失败
this.loadingFailed = true;
},err=>{
this.loadingFailed = true;
})
}
步骤一的HTML代码修改如下：
<div class="content" style="height: 100%;overflow: auto;" (scroll)="scrollBottom($event)">
<div class="list" *ngFor="let item of listData">{{item}}</div>
<div *ngIf="getBottom">加载中...</div>
<div *ngIf="noMore">没有更多数据了</div>
<div *ngIf="loadingFailed">数据加载失败,请重试</div>
</div>
网友评论