Question

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

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>

下面是我的代码：

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。来自docs的例子：

您应该执行以下操作：

<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-content包装元素，在大多数情况下我们必须包含它以强制离子工作。如果您还没有，请将其包含在屏幕截图中。

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

1 个答案: