面对使用 ionic 2/3 的无限滚动问题

Question

在这里，我使用参数使用动态数据，我应用了无限滚动，但项目没有显示在我的滚动页面上，下面是我的代码：

.html

  <ion-list class="_list" *ngFor="let ifo of IData;"  (click)="go(ifo.Id,ifo.Name)"   >

<ion-item class="itm">
      <ion-avatar item-start role="img">
        <img [src]="'data:image/png;base64,'+ifo.Image" style="width: 110px;">
      </ion-avatar>

      <div class="item-inner">
        <h2 class="_nme">{{ifo.Name}}</h2>
        <p class="_price">{{ifo.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>

下面是我的 ts 代码：

getAllData(id){     
    const toast = this.toastCtrl.create({
      message: 'Unable to get data',
      duration: 2000,
      position: 'bottom'
    });

    this.serv.Get(id).subscribe(res =>{
      loading.dismiss();

      this.iData = res.GetResult;
      console.log(this.iData);


    },err=>{
       toast.present();
    })

  }




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

实际上直到那个汤项目只有列表在那里，即使没有列表它显示空图像和列表

Answer 1

看起来是因为您重复 ion-list 而不是 ion-item。来自文档的示例：

您应该执行以下操作：

<ion-list class="_list">
  <ion-item class="itm" *ngFor="let ifo of IData" (click)="go(ifo.Id,ifo.Name)">CONTENT OF ITEM GOES HERE</ion-item>
</ion-list>

想法是在 一个容器 中重复项目。这里是 docs 的参考以获取更多信息。

P.S.:我也不确定，有没有ion-contentwrapper元素，大多数情况下我们必须强制包含它离子的东西工作。如果您还没有，请按照屏幕截图所示添加它。

面对使用 ionic 2/3 的无限滚动问题

Facing issue with infinite scroll using ionic 2/3

ionic-framework

ionic2

ionic3

angular