上拉加载用的是ionic控件ion-infinite-scroll,使用示例如下:
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."> </ion-infinite-scroll-content> </ion-infinite-scroll>
加载完之后需要收起 loading 动画:
doInfinite(infiniteScroll) {
...
infiniteScroll.complete();
}
详情说明请看官方文档:https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/#enable
完整demo
html部分:
<ion-infinite-scroll [enabled]="enable" (ionInfinite)="refreshData(false,loanType,$event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多数据"> </ion-infinite-scroll-content> </ion-infinite-scroll>
ts部分:
currPage:number = 1; enable = true; loanType:string; loans = []; // 刷新数据 refreshData(reset:boolean, loanType:string, infiniteScroll?) { if (reset) { this.currPage = 1; this.enable = true; this.loans = []; }else{ this.currPage++; } this.loanType = loanType; const paramData = { 'currPage': this.currPage.toString(), 'loanType': loanType, }; this.productsService.getProductList(paramData).subscribe(data => { if(data.success && data.code === '0001'){ this.loans = this.loans.concat(data.data.loans); // 如果是上滑刷新,则调用控件complete方法 if(infiniteScroll){ infiniteScroll.complete(); } // 如果当前页大于等于总页数,则禁用上滑刷新控件 if(this.currPage >= data.data.page.totalPage){ this.enable = false; } }else{ this.toastCtrl.create({message: data.msg, duration: 3000, position: 'top'}).present(); } }) }