时间戳

首页 > 解决方案 > 使用 ionic 2/3 面临无限滚动的问题

angular - 使用 ionic 2/3 面临无限滚动的问题

问题描述

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

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

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

标签： angularionic-frameworkionic2ionic3

解决方案

看起来是因为您重复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>

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

PS：我也不确定，你有ion-content包装元素吗，在大多数情况下我们必须包含它来强制离子的东西工作。如果您还没有，请按照屏幕截图所示包含它。

推荐阅读