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

kfq00 2017-06-22

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);
  }

}

相关推荐