Question

我正在尝试使用带有简单代码的无限滚动进行测试。问题是ion-infinite-scroll不再触发ionInfinite事件。

下面是我的代码和项目的ionic info。

home.ts

listData=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"];
fiveobjects = [];
page = 0;
maximumPages = 3;

constructor(){}

  ngOnInit() {
this.get_data_from_array(event);
}

...

async get_data_from_array(event){
 this.fiveobjects =  this.listData.slice(0, 10);
 console.log(this.fiveobjects);

 if(event){
   event.target.complete();
 }
}

loadMore(event){
  console.log(event);
this.page++;
this.get_data_from_array(event);

if(this.page === this.maximumPages){
  event.target.disabled = true;
}
}

}

home.html

<ion-content>
<ion-card>
  <ion-item *ngFor="let item of fiveobjects">
    <ion-label>{{item}}</ion-label>   
  <br>
    <ion-label>..</ion-label>
  </ion-item>
</ion-card>

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

离子信息

离子：

   Ionic CLI                     : 5.4.13 (C:\Users\saurabh\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.5    
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v12.14.0 (C:\Program Files\nodejs\node.exe)    
   npm    : 6.13.4
   OS     : Windows 10

离子无限滚动不触发ionInfinite事件-离子5

0 个答案: