The article directories

  • Pull up to load the official website code
    • Practice diagram
  • Drop down to refresh the code
    • Practical application

Pull up to load the official website code

Ionicframework.com/docs/api/in…

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>
Copy the code
  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);
  }
Copy the code

Practice diagram

Drop down to refresh the code

<! -- Drop down refresh --> <ion-refresher (ionRefresh)="Refresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown"
                           pullingText="Drop-down refresh"
                           refreshingSpinner="circles"
                           refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
Copy the code

Practical application