loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值)
初始化loading为false,finished为false。
加载的list,页面上有个切换的tab,实现切换不同的类型,加载不同的list的功能。vant-ui的list就有个bug,当切换tab的时候,它的onload没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload就可以实现自动触发。
在切换tab后执行初始化函数
//切换tab changeAct(index, title) {
this.active = index;
this.orderColumn = title =='价格'?'price': title =='上新'?'time':'default';
if(this.orderColumn =='price') {
this.orderTypeCut = !this.orderTypeCut;
}
this.orderType =this.orderTypeCut ?'desc':'asc';
this.page =1;
this.goodList = [];
//切换的时候这个两个状态要加上,不然上拉加载在这个时候也会触发
this.loading =true;
this.finished =false;
if(this.loading){
this.onLoad(this.page,this.keyword,this.orderColumn);
}
},
上拉加载触发的方法
onLoad(page, keyword, orderColumn) {
this.pageload=true;
varself =this;
varurl =this.util.head_host +'goods/list';
varparams=new FormData();
params.append('client_id',this.util.client_id);
params.append('timestamp',this.util.timestamp);
params.append('sign',this.util.sign);
params.append('page', page);
params.append('keyword', keyword);
params.append('orderColumn', orderColumn);
if(orderColumn =='price') {
params.append('orderType',this.orderType);
}
this.$api({
method: 'POST',
url: url,
data: params,
headers: {
'token': self.util.access_token
},
}).then(function(res) {
if(res.data.code ==0) {
//console.log(res.data)if(res.data.data.length >0) {
self.goodList = self.goodList.concat(res.data.data);
}
self.lastPage = res.data.nextPage;
self.page = self.lastPage;
// 加载状态结束self.loading =false;
// 数据全部加载完成if(self.lastPage ==0) {
self.finished =true;
}
} elseif(res.data.code ==401) {
self.callJsFunction;
self.onLoad(self.page, self.keyword, self.orderColumn)
}
self.pageload=false;
}).catch(function() {
})
},
在第一次onload的过程中将loading设置为false,则触发第二次loading,当执行到满足结束条件的时候,finished为true,结束加载。