6.组件(四):下拉刷新上上拉加载

July 2, 2018

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

下拉刷新上上拉加载

  <ion-refresher (ionRefresh)="doRefresh($event)">

    <!-- 默认显示最合适平台的效果，也可以按如下方式自定义
       <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-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-list >
    <ion-item text-wrap *ngFor="let item of policyNewsList" (click)="itemSelected(item)">            
      <h2> {{ item.news_title }}</h2>
      <p>{{ item.ts | timeInterval }}</p>      
    </ion-item>
  </ion-list>
  
  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

ts文件

  doRefresh(refresher){
    //...
    refresher.complete(); 
  }

  loadMore(infiniteScroll){
    //...
    infiniteScroll(); 
  }

todo:

iOS平台上美观的下拉控件。