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>

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>

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

}