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

但是此功能仅在我的应用程序末尾有效。

这是我的追求的视频

Answer 1

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

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

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的documentation

  

从内容底部到滚动时调用无限输出事件的阈值距离。阈值可以是百分比或以像素为单位。例如，当用户从页面底部滚动10％时，将10％的值用于无限输出事件即可调用。滚动距离页面底部100像素以内时，请使用值100px。默认值为15％。

Answer 2

your ion-list needs to be wrapped by a ion-content，否则会出现错误：

  

错误错误：StaticInjectorError（AppModule）[InfiniteScroll->内容]：     StaticInjectorError（平台：核心）[InfiniteScroll->内容]：       NullInjectorError：没有内容提供者！

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
    <ion-content>
      <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>
    </ion-content>
</div>

Check the live example

---

设置

如果您要查看“正在加载”文本，请查看settings for infinite scroll：

在顶部加载新元素

  

位置字符串
  无限滚动元素的位置。该值可以是top或bottom。默认值为底部。

如果您希望您的应用将项目添加到顶部，请使用此选项。

更早加载

  

阈值字符串
  从内容底部到滚动时调用无限输出事件的阈值距离。阈值可以是百分比或以像素为单位。例如，当用户从页面底部滚动10％时，将10％的值用于无限输出事件即可调用。滚动距离页面底部100像素以内时，请使用值100px。默认值为15％。

如果希望它早些加载其他项目，请使用此选项，这样您就不会看到“正在加载”文本。

Answer 3

您正在做this.items.push( this.items.length );，这意味着items的长度被推入items[]中。

尝试推动对象本身，它将起作用。

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

注意： 您应该定义开始和结束变量，以免最终一次又一次显示相同的项目。