vue vant框架上拉加载效果 list列表上拉加载重复加载问题
vue vant框架上拉加载效果,list列表上拉加载重复加载问题。如果上拉一次出现了加载几次的情况:一、注意this.loading=false;设置是否正确;二、每次加载的数据条数给多一点。//html<van-listv-model="loading":finished="finished"finished-text="没有更多了"error-text="请求失败,点击重新加载"@lo
·
vue vant框架上拉加载效果,list列表上拉加载重复加载问题。
如果上拉一次出现了加载几次的情况:
一、注意this.loading=false;设置是否正确;
二、每次加载的数据条数给多一点。
//html
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
error-text="请求失败,点击重新加载"
@load="onLoad"
:immediate-check="false"
>
</van-list>
//methods
onLoad() {
//加个延迟可以短暂看到加载中,体验好一点, 不然太快了有点感觉不到是上拉加载
//这里不能写this.loading=false;不然每一次下拉会重复加载
setTimeout(() => {
this.home_info_pay();
}, 1000);
},
home_info_pay(){
var self = this;
axios({
method:'get',
url:'/api/home/index/index_paylist',
params:{
'start':self.start,//第几次加载传到后台,让后台知道从哪一条数据开始
},
headers:{
'XX-Token':ses.login
}
}).then(function(res){
console.log(res);
if (res.data.code==1) {
if(res.data.data.length==0){
self.finished = true;
return false;
}
for(var i in res.data.data){
self.homeinfo.payData.push(res.data.data[i]);
}
self.start +=1;
console.log(self.start);
self.loading=false; //加载完成才设置false,让其可以执行下一次加载
}else{
vant.Dialog({message: res.data.msg});
}
});
},
更多推荐
已为社区贡献7条内容
所有评论(0)