ionic 4-加载微调器无法在无限滚动中工作

Question

即使在我将loadingSpinner行添加到代码中之后，加载微调器也不会显示在无限滚动的底部

<ion-infinite-scroll (ionInfinite)="getProducts($event)">
  <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
</ion-infinite-scroll>

Answer 1

我尚未检查您的代码，但我确定是因为 Ionic4发出的事件类型有所变化。在Ionic v3中，我们发出了合成的Angular事件，但是在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);
  }

Here is solution on stackblitz

希望这会有所帮助！

Answer 2

离子4：

<ion-infinite-scroll (ionInfinite)="getProducts($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data…">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

离子3：

<ion-infinite-scroll (ionInfinite)="(ionInfinite)="getProducts($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

有关Ionic Docs的更多信息：

Ionic 4 - infinite-scroll

Ionic 3 - infinite-scroll