时间戳

首页 > 解决方案 > 无法使用 Ionic 3 使用无限滚动

ionic-framework - 无法使用 Ionic 3 使用无限滚动

问题描述

在这里，我正在获取应用无限滚动的数据，但下面的滚动页面上未显示的项目是我的代码：

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

实现此代码后，我只是得到空白屏幕，数据未显示在模板中，并且没有实现它正在显示的无限滚动。

标签： ionic-frameworkionic2ionic3infinite-scroll

解决方案

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

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

推荐阅读