滚动一次后,离子无限滚动不起作用

时间:2019-09-04 21:42:18

标签: angular ionic-framework

我正在使用离子4离子 我正在尝试使用无限滚动 我的.html页面是:

<ion-content>

  <ion-grid>
    <ion-row>
      <ion-col style="flex:1;">
        ID
      </ion-col>
      <ion-col style="flex:2;">
        Date
      </ion-col>
      <ion-col style="flex:1;">
        Amount
      </ion-col>
      <ion-col style="flex:1;">
        Type
      </ion-col>
      <ion-col style="flex:1;">
        Status
      </ion-col>
    </ion-row>
    <ion-row *ngFor="let item of dataList">
      <ion-col style="flex:1;">
        {{item.id}}
      </ion-col>
      <ion-col style="flex:2;">
        {{item.created}}
      </ion-col>
      <ion-col style="flex:1;">
        {{item.total}}
      </ion-col>
      <ion-col style="flex:1;">
        <b *ngIf="item.type==1">Delivery</b>
        <b *ngIf="item.type==2">Pickup</b>
        <b *ngIf="item.type==3">Reservation</b>
        <b *ngIf="item.type==4">R with Food</b>
        <b *ngIf="item.type==5">QR</b>
        <b *ngIf="item.type==6">Catering</b>
      </ion-col>
      <ion-col style="flex:1;">
        {{item.status}}
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
  loadingSpinner="bubbles"
  loadingText="Loading more data...">
</ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

和.ts页面是:

loadData( event ) {
console.log('loadData called');
setTimeout(() => {
  console.log('Done');

  //loading some data from server

  event.target.complete();
  if (this.dataList.length > 100) {
    event.target.disabled = true;
  }
}, 500);

}

在构造函数中,我也在开始时加载了一些数据

现在,当我运行它时,滚动工作一次。它会在第一次滚动中加载一些数据。 之后,滚动甚至不会触发。

可能是问题所在。 谁能帮忙吗?

0 个答案:

没有答案
相关问题