ionic4——上拉加载下拉更新

xxx.html

<ion-content>

    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="加载中..." refreshingSpinner="circles" refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>

 
    <ion-list>
       <ion-item *ngFor="let item of list">
           <ion-label>{{item}}</ion-label>
       </ion-item>
    </ion-list>
    
    <ion-infinite-scroll threshold="10%" (ionInfinite)="loadData($event)">
       <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="Loading more data...">
       </ion-infinite-scroll-content>
    </ion-infinite-scroll>
    
   </ion-content>
   

xxx.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  list: any[] = [];
  constructor() {
    for (let i = 0; i < 10; i++) {
      this.list.push(`这是第${i}条数据`);
    }

  }

  loadData(event) {
    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        this.list.push(`这是第${i}条上拉数据--服务器获取`);
      }
      event.target.complete(); // 告诉ion-infinite-scroll数据已经更新完成 不加这句话的话会卡死
      // 当列表条数到达最大值禁用上拉
      if (this.list.length > 40) {
        event.target.disabled = true;
      }
    }, 1000);
  }

  doRefresh(event) {
    setTimeout(() => {
      for (let i = 10; i < 15; i++) {
        this.list.unshift(`我是第${i}条下拉数据`);
      }
      event.target.complete(); // 告诉ion-refresher 更新数据
    }, 2000);
  }
}

结果图