angular - InfiniteScroll 不能在 ionic 3 上运行吗？

Question

我在我的IONIC 3应用程序中实现无限滚动时遇到问题

这是我的home.html：

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
    <ion-list>
      <ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        <ion-thumbnail item-left>
            <img [src]="item.imagem">
        </ion-thumbnail>
        <h2 style="color:#886AEA">{{ item?.nome }}</h2>
        <p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
      </ion-item>
    </ion-list>

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

这是我的home.ts：

items: any[];

constructor(private afAuth: AngularFireAuth, private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
    this.initializeItems();
}

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);
}

但是，此功能仅在我的应用程序结束时有效。

这是我的应用程序的视频

标签： angulartypescriptionic3

Answer 1

从您的问题和评论中，我相信您想要达到的效果是列表在用户到达列表末尾之前加载下一组列表项。截至目前，该doInfinite($event)事件仅在用户滚动到列表末尾后触发。您将希望在结束前一点触发此事件。

为此，请将属性添加threshold到 html。阈值定义doInfinite($event)应该触发的点。例如，如果阈值为 25%，则当用户距离列表末尾 25% 时触发事件，即一旦滚动了 75% 的列表。

html 现在看起来像：

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-thumbnail item-left>
        <img [src]="item.imagem">
      </ion-thumbnail>
      <h2 style="color:#886AEA">{{ item?.nome }}</h2>
      <p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll threshold="25%" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>

来自 Ionic 的文档

滚动时调用无限输出事件的距离内容底部的阈值距离。阈值可以是百分比，也可以是像素。例如，当用户从页面底部滚动 10% 时，使用 10% 的值来调用无限输出事件。当滚动距离页面底部 100 像素以内时，使用值 100px。默认值为 15%。