InfiniteScroll

优质
小牛编辑
130浏览
2023-12-01

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

可以用来实现上拉加载。

使用方法

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

Infinite Scroll Content

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

实例方法

state()

complete()

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

enable(shouldEnable)

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

  • shouldEnable boolean

属性

  • threshold string

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

输出事件

  • infinite