ionic5.X拓展的ion-refresher下拉刷新

在移动端会经常使用到的一个功能，下拉刷新更多的数据出来（也就是加载更多数据）
首先可以先查看英文的官方文档：ion-refresher: Ionic Framework API Docs

模板代码：

<ion-header>
  <ion-toolbar>
    <ion-title>下拉刷新</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="下拉加载更多"
      refreshingSpinner="circles" refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-list>
    <ion-item *ngFor="let item of list;let key = index;">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

ts部分的代码：
可以设置多少毫秒后去加载更多的数据

  list = [];

  constructor() { }

  ngOnInit() {
    for (let i = 0; i < 10; i++) {
      this.list.push(i);
    }
  }

  doRefresh(event) {
    setTimeout(() => {
      for(let j = 10 ; j < 20; j++){
        this.list.unshift(j);
      }
      event.target.complete();
    }, 2000);
  }

大致预览效果图如下：这个功能实际开发场景中可以嵌入接口请求

image.png