InfiniteScroll

当用户滚动到页面底部时，可以通过InfiniteScroll执行一个动作。

可以用来实现上拉加载。

使用方法

  1. <ion-content>
  3.  <ion-list>
  4.    <ion-item *ngFor="#i of items"></ion-item>
  5.  </ion-list>
  7.  <ion-infinite-scroll (infinite)="doInfinite($event)">
  8.    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  9.  </ion-infinite-scroll>
  11. </ion-content>
  1. @Page({...})
  2. export class NewsFeedPage {
  4.   constructor() {
  5.     this.items = [];
  6.     for (var i = 0; i < 30; i++) {
  7.       this.items.push( this.items.length );
  8.     }
  9.   }
  11.   doInfinite(infiniteScroll) {
  12.     console.log('Begin async operation');
  14.     setTimeout(() => {
  15.       for (var i = 0; i < 30; i++) {
  16.         this.items.push( this.items.length );
  17.       }
  19.       console.log('Async operation has ended');
  20.       infiniteScroll.complete();
  21.     }, 500);
  22.   }
  24. }

Infinite Scroll Content

  1. <ion-content>
  3.   <ion-infinite-scroll (infinite)="doInfinite($event)">
  4.     <ion-infinite-scroll-content
  5.       loadingSpinner="bubbles"
  6.       loadingText="Loading more data...">
  7.     </ion-infinite-scroll-content>
  8.   </ion-infinite-scroll>
  10. </ion-content>

实例方法

state()

complete()

调用该方法来表示加载已经完成。

enable(shouldEnable)

调用该方法可以设置InfiniteScroll是否处于激活状态。当shouldEnable是false时，InfiniteScroll将被禁用。

  • shouldEnable boolean

属性

  • threshold string

    设置滚动触发的阙值。例如距离底部还有10%的时候触发事件。

输出事件

  • infinite