Ionic2真的非常棒，为我们整合了下拉刷新和上拉加载，我们只需要在页面中添加ion-refresher和ion-infinite-scroll标签，并稍加控制就可以实现很完美的效果。
下面来看看它们的使用：
下拉刷新：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@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); } } |
上拉加载：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@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); } } |
在相关操作完毕之后，必须要调用complete()。
两个功能可根据实际项目整合使用。