上拉加载下拉更新

Posted 2021-01-07 wskxy

1.上拉加载

　　引用官网给出的代码

<ion-content>

  <ion-list>
    <ion-item *ngFor="let item of list">
      {{item}}
    </ion-item>
  </ion-list>

　<!-- 这是官网给的代码，必须放在列表下方 -->

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>


</ion-content>

　　ts：

  public list = [];
  public sum = 0;
  constructor() {
    this.setdata();
  }
  setdata() {
    for (let i = 0; i < 10; i++) { //模拟获取数据
      this.sum += 1;
      this.list.push(`第${this.sum}条数据`)
    }
  }
  doInfinite(event) {
    setTimeout(() => {
      this.setdata();
      event.complete();//提交更新
      console.log(1);
      if(this.sum>=50){
        event.enable(false);//终止上拉
      }
    }, 2000);
  }

2.下拉更新

　　同样，用官网的代码

<ion-content>
  <!-- 这个要放在列表前面 -->
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉更新" refreshingSpinner="circles" refreshingText="正在更新">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list>
    <ion-item *ngFor="let item of list;let key=index" [navPush]="NewsinfoPage" [navParams]="params">
      {{item}}
    </ion-item>
  </ion-list>
</ion-content>

　　然后写doRefresh方法

 public list = [];
  sum = 0;
  constructor() {
    this.setdata();
  }

  setdata() {
    let temp=[];
    for (let i = 0; i < 10; i++) {
      temp.push(`第${i}条数据,第${this.sum}次更新`);
    }
    this.list=temp;
  }
  doRefresh(event) {
    setTimeout(() => {
      this.sum+=1;//模拟更新
      this.setdata();
      event.complete();
    }, 2000);
  }