欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic2 + cordova 应用-列表刷新(上拉)

程序员文章站 2022-05-31 08:22:17
...

9.1 列表使用(欢迎加入Q群一起学习讨论657185219)

<ion-content>

  <ion-list>
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item *ngFor="let i of items">
      <!--<ion-icon name="ionic" item-left></ion-icon>-->
      @ionicframework{{i}}
    </ion-item>
  </ion-list>


  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="上滑加载">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

 

9.2 控制层

export class ContactPage {
  items = [];
  constructor(public navCtrl: NavController) {
    for (let i = 0; i < 5; i++) {
      this.items.push( this.items.length );
    }
  }


  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 5; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

}