上拉刷新==>
Html:
<ion-content style="background-color:white">
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
TypeScript:
//下拉刷新 doRefresh(refresher) { //console.log('Begin async operation', refresher); setTimeout(() => { this.BindUserModule(); //绑定方法 console.log('Async operation has ended'); refresher.complete(); }, 1000); }
上拉刷新==>
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); } }