angular+ionic3实现上拉刷新 下拉加载

一、案例效果

二、实现思路

可以运用组件 “ion-refresher-content” “ion-infinite-scroll”

三、代码实现

html

ts

四、代码实现

html

<ion-content padding>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <!-- bubbles circles arrow-down-->
    <ion-refresher-content
      pullingIcon="arrow-round-down"
      pullingText="下拉刷新数据"
      refreshingSpinner="bubbles"
      refreshingText="正在刷新数据中..."></ion-refresher-content>
  </ion-refresher>
  <!-- {
   
   {customerIds.join()}} -->
  <div class='contentCustomer'>
   
    <!-- <not-data [hidden]='hiddenNotData'></not-data> -->
    <div class='fullLoading' *ngIf='fullLoading'>已全部加载</div>
  </div>
  <ion-infinite-scroll [hidden]='(customers && customers.length < 5) || (customers && customers.length >= totalNumber)' threshold='0' (ionInfinite)="$event.waitFor(doInfinite($event))">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

ts 仅供参考

 doRefresh(refresher) {
    this.params.pageNum = 1;
    this.customerIds = [];
    this.oldConsultantIds = [];
    this.infiniteScroll && this.infiniteScroll.enable(true);
    this.fullLoading = false;
    this.customerService.getCustomer(this.params).subscribe(resp => {
      this.totalNumber = resp.total;
      resp.list.map(item => {
        if (item && item.lastFollowTime) {
          item.lastFollowTime = item.lastFollowTime.replace(/\-/g, '/')
        }
        item.customerId = item.customerId || item.registerId
        item.isMain = item.isMain || 1
        item.intentionClass = item.intentionClass || 2
      })
      console.log(resp.list)
      this.customers = resp.list;
      if (!resp.list.length) {
        this.hiddenNotData = false;
      } else {
        this.hiddenNotData = true;
      }
      refresher.complete();
    }, () => {
      refresher.complete();
    });
  }

 getInformList(infiniteScroll?) {
    this.loading.show();
    this.userService.getMessageDetails(this.params).subscribe(resp => {
      if (this.unReadCount > 0) {
        this.events.publish('readTheMessage:created');
      }
      this.totalNumber = resp.total;
      if (resp.list.length) {
        this.informList.push(...resp.list)
      } else {
        infiniteScroll.enable(false);
        this.fullLoading = true;
      }
      this.loading.hide();
    })
  }
  doInfinite(infiniteScroll): Promise<any> {
    this.params.pageNum++;
    return new Promise((resolve) => {
      setTimeout(() => {
        this.getInformList(infiniteScroll);
        resolve();
      }, 300);
    })
  }