Ionic2如何下拉刷新和上拉加载

最新推荐文章于 2018-09-04 17:16:56 发布

转载最新推荐文章于 2018-09-04 17:16:56 发布 · 3.4k 阅读

Ionic2 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Ionic框架实现列表的上拉加载更多数据与下拉刷新功能。通过HTML与TypeScript代码示例展示了ion-refresher与ion-infinite-scroll组件的具体用法。同时介绍了如何通过定时器模拟异步操作以及如何完成刷新和加载更多的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上拉刷新==>

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

}