ion-infinite-scroll上拉加载 & ion-refresher下拉刷新

文章目录

• 上拉加载官网代码
• • 练习图解
• 下拉刷新代码
• • 实战应用

上拉加载官网代码

https://ionicframework.com/docs/api/infinite-scroll

ion-infinite-scroll

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

练习图解

下拉刷新代码

  <!-- 下拉刷新 -->
  <ion-refresher (ionRefresh)="Refresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown"
                           pullingText="下拉刷新"
                           refreshingSpinner="circles"
                           refreshingText="刷新中...">
    </ion-refresher-content>
  </ion-refresher>

实战应用