Ionic2如何下拉刷新和上拉加载

下拉刷新：

 1 <ion-content>
 2   <ion-refresher (ionRefresh)="doRefresh($event)">
 3     <ion-refresher-content
 4       pullingIcon="arrow-dropdown"
 5       pullingText="Pull to refresh"
 6       refreshingSpinner="circles"
 7       refreshingText="Refreshing...">
 8     </ion-refresher-content>
 9   </ion-refresher>
10 </ion-content>

TypeScript：

 1 @Component({...})
 2 export class NewsFeedPage {
 3   items = [];
 4   doRefresh(refresher) {
 5     console.log('Begin async operation', refresher);
 6 
 7     setTimeout(() => {
 8       this.items = [];
 9       for (var i = 0; i < 30; i++) {
10         this.items.push( this.items.length );
11       }
12       console.log('Async operation has ended');
13       refresher.complete();
14     }, 2000);
15   }
16 
17 }

上拉加载：

<ion-content>

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

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

TypeScript：

@Component({...})
export class NewsFeedPage {
  items = [];

  constructor() {
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }

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

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

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

}

 

posted @ 2017-02-16 11:12  胡金水  阅读(9829)  评论(5)  编辑  收藏  举报