Ionic4.x ion-refresher 下拉更新

官方文檔:https://ionicframework.com/docs/api/refresher

 

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<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-content>

 

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

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {


  public list:any[]=[];
  constructor(){

      for(var i=0;i<10;i++){

        this.list.push(`我是第${i}條數據`);
      }
  }

  doRefresh(event){

    setTimeout(()=>{
      for(var i=10;i<15;i++){

        this.list.unshift(`我是第${i}條數據`);        
      }
      event.target.complete();    //告訴ion-refresher  更新數據

    },2000)

  }
}