无法使用Ionic 3的无限滚动。

Question

在这里，我得到的数据，我应用了无限滚动，但项目没有显示在我的滚动页面以下是我的代码。

.html

     <ion-list 
*ngFor="let infi of IfoData;"  (click)="Item(infi.Id)"   >
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">

       <ion-infinite-scroll-content>
    <ion-item>

          <div >

            <p>{{infi.Cost}}</p>

          </div>

        </ion-item>

    </ion-infinite-scroll-content>
     </ion-infinite-scroll>
      </ion-list>

.js

        doInfinite(infiniteScroll) {
        console.log('Begin async operation');

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

          console.log('Async operation has ended');
          infiniteScroll.complete();
        }, 500);
      }

在实现这段代码后，我只是得到空的屏幕，数据不显示在模板中，没有实现这个无限滚动，它是显示。

Answer 1

无限滚动组件必须是离子内容的最后一个元素。你应该像这样尝试

<ion-content>
<ion-list>
<ion-item class="itm" *ngFor="let i of IData;"  (click)="goItem(i.Id,i.Name)">
      <ion-avatar item-start role="img">
        <img [src]="'data:image/png;base64,'+i.Image" style="width: 110px;">
      </ion-avatar>

      <div class="item-inner">
        <h2 class="_nme">{{i.Name}}</h2>
        <p class="_price">{{i.Cost}}</p>
        <ion-icon name="arrow-dropright"></ion-icon>
      </div>

    </ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

ion-infinite-scroll-content是为了改变默认的spinner，并在无限滚动中添加文本。

请参考 文件 详见

Answer 2

将无限滚动放在离子内容的最后面

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

在你的ts文件中，doInfinite(infiniteScroll) { console.log('Begin async operation')。

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

  console.log('Async operation has ended');
  infiniteScroll.complete();
}, 500);