1. 合并数据
this.list=[…this.list,…res.data.message.goods];
请求接口以及返回数据:
加载下一页 - pagesum++, 返回的数据是每页的数据,也需要之前页的数据展示。
错误:this.list=res.data.message.goods;
正确:this.list=[…this.list,…res.data.message.goods];
2. 页面上拉触底事件触发this.pagenum++, 写在请求成功里面,而不是直接写在onReachBottom(页面上拉触底事件的处理函数)里面 — 解决了不会同时存在多个请求,避免服务器的崩溃
//页面上拉触底事件的处理函数
onReachBottom(){
this.getlist();
},
success:(res)=>{
console.log(res.data);
this.list=[...this.list,...res.data.message.goods];
if(this.list.length>=res.data.message.total){
this.showall=true;
}
this.isloading=false;
//请求成功后才页面数+1,防止请求同时请求多个页数
this.pagenum++;
}
3. 如果开关是正在加载的状态,直接返回 — if(this.loading) return;
触底时如果已经有请求,不再请求,等待请求完成
data() {
return {
isloading:false,
}
},
getlist(){
// 如果开关是正在加载的状态,直接返回
if(this.loading || this.showall){
return;
}
// 打开开关
this.isloading=true;
uni.request({
url:'https://xxxx/api/public/v1/goods/search',
data:{
query:'TCL',
pagenum:this.pagenum,
pagesize:10
},
success:(res)=>{
console.log(res.data);
this.list=[...this.list,...res.data.message.goods];
if(this.list.length>=res.data.message.total){
this.showall=true;
}
// 关闭,表示加载完毕
this.isloading=false;
//请求成功后才页面数+1,防止请求同时请求多个页数
this.pagenum++;
}
})
}