以下僅作為我個(gè)人的工作記錄及對(duì)未來工作的提醒琼梆。
頁面同時(shí)有下拉刷新和上滑加載更多性誉,在ionic3里面相應(yīng)的組件及方法:
// 下拉刷新
doRefresh(refresher) {
setTimeout(() => {
this.loadList();
refresher.complete();
}, 2000);
}
loadList(){
let loading = super.showLoading(this.loadingCtrl, '加載中...');
this.uservice.getListApi({page: this.reqParams.page,limit:
this.reqParams.limit}).subscribe(data=>{
loading.dismiss();
if(data.rows.length > 0){
this.list = this.list.concat(data.rows) // 此處為重點(diǎn)窿吩,這里不能如普通列表直接用this.list = data.rows,
this.reqParams.page = this.reqParams.page + 1;
}else if(data.rows.length === 0){
this.hasMore = false;
}
},err=>{
loading.dismiss();
this.errMsg = <any>err;
super.showToast(this.toastCtrl, this.errMsg);
})
}
this.list = this.list.concat(data.rows)
// 此處為重點(diǎn)错览,這里不能如普通列表直接用this.list = data.rows纫雁,因?yàn)楫?dāng)用戶下拉刷新的時(shí)候再請(qǐng)求列表將會(huì)請(qǐng)求第二頁(因第一次loadList()已經(jīng)將請(qǐng)求的頁碼增加到第二頁),如果用普通列表那樣直接等于請(qǐng)求回來的列表在下拉刷新時(shí)覆蓋掉第一頁倾哺。
// 翻頁
doInfinite(infiniteScroll){
if (this.hasMore == false) {
infiniteScroll.complete();
return;
}
this.uservice.getListApi({page: this.reqParams.page,limit: this.reqParams.limit}).subscribe(data=>{
if(data.rows.length > 0){
this.list = this.list.concat(data.rows);
this.reqParams.page = this.reqParams.page + 1;
}else {
this.hasMore = false;
}
infiniteScroll.complete();
})
}
不管上滑還是下拉轧邪,加載的永遠(yuǎn)是最新的一頁。
希望下次來看這篇文羞海,能夠知道自己要描述什么吧忌愚。。却邓。給自己多一點(diǎn)笑臉嘿嘿