代码之家 › 专栏 › 技术社区 › TheParam sejmy

在Ionic 4中调用complete()时,无限滚动不起作用

ionic4 angular

0

TheParam sejmy · 技术社区 · 6 年前

我有一个来自后台的大量项目列表。我在用离子 ion-infinite-scroll 用于在用户到达列表末尾时延迟加载数据。但是当用户到达列表的末尾时,我得到了下面的错误。

list.component.html列表

<ion-content padding>
    <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"></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

list.component.ts列表

export class ActionSheetComponent {

  items = [];
  constructor(
    private actionSheetCtrl: ActionSheetController
  ) {
     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);
  }


}

1 回复 | 直到 6 年前

1

3

TheParam sejmy 6 年前

从Ionic4开始,V4中发出的事件类型发生了变化。在Ionic v3中,我们发出合成角度事件,但在V4中,我们发出HTML事件,这意味着您需要从事件访问完整的方法 target $event.target.methodName()

解决方案-

 doInfinite(infiniteScroll) {

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push(this.items.length);
      }

      infiniteScroll.target.complete(); // this is how you need to call in v4
    }, 500);
  }

希望这将帮助每个人谁是使用离子4!