ionic2下拉刷新和上拉加载

最新推荐文章于 2023-03-18 11:49:18 发布

刘_小飞

最新推荐文章于 2023-03-18 11:49:18 发布

阅读量690

点赞数 1

本文链接：https://blog.csdn.net/l775632765/article/details/70053849

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

angular2

4 篇文章 0 订阅

订阅专栏

ionic2

3 篇文章 0 订阅

订阅专栏

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();
否则会在一次加载时多次请求数据的情况