ionic2 + cordova 应用-列表刷新（上拉）

最新推荐文章于 2017-12-22 16:15:19 发布

原创最新推荐文章于 2017-12-22 16:15:19 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic2 #cordova #angular #中文 #教程

ionic2 + cordva混合开发专栏收录该内容

11 篇文章

订阅专栏

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

}