ionic2下拉刷新和上拉加载

ionic2下拉刷新方法

html:

<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Pull to refresh"
        refreshingSpinner="circles"
        refreshingText="Refreshing...">
      </ion-refresher-content>
    </ion-refresher>
 </ion-content>

typescript：

 @Component({...})
  export class NewsFeedPage {
    items = [];
    doRefresh(refresher) {
      console.log('Begin async operation', refresher);
      setTimeout(() => {
        this.items = [];
        for (var i = 0; i < 30; i++) {
         this.items.push( this.items.length );
       }
       console.log('Async operation has ended');
       refresher.complete();
     }, 2000);
   }

 }
ionic2上拉加载方法
html:
<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);
  }
}
在上拉加载时注意：只有在数据请求完成时在操作通知加载完成 
infiniteScroll.complete();
否则会在一次加载时多次请求数据的情况