Ionic4.x ion-refresher 下拉更新

最新推荐文章于 2021-06-04 00:39:12 发布

山清水秀iOS

最新推荐文章于 2021-06-04 00:39:12 发布

阅读量169

点赞数

原文链接：http://www.cnblogs.com/loaderman/p/10973512.html

版权

官方文档: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)

  }
}