Ionic上滑刷新

上拉加载用的是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();
            }
        })
    }