我正在尝试使用无限滚动加载动态数据,但是当我到达底部页面时,该事件不会触发。
<ion-content (ionScroll)="scroll($event)" [scrollEvents]="true">
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100"
pullMax="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
//Data
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)"
[disabled]="runtimes <= 0" *ngIf="!noRecord" >
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
离子无限滚动事件不会在TS文件中触发。我已经到达页面底部,但是没有动画。
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
@ViewChild(IonContent) content: IonContent;
//Requesting Data
loadReport() {
return new Promise(resolve => {
this.postPvdr.postData(body, 'proses-api.php').subscribe(data => {
for (let report of data.result) {
this.income.push(report);
}
resolve(true);
});
});
}
这是无限滚动的事件
loadData(event) {
//To limit the Number of Loading
this.runtimes = this.runtimes - 1;
if (this.runtimes < 0) {
this.noRecord = true;
}
setTimeout(() => {
this.loadReport();
event.target.complete();
}, 2000);
}
欢迎任何答案。
答案 0 :(得分:0)
这是Ionic的最新版本(我相信是4.6.0)的一个已知问题。当前的解决方案是将其降级到仍在运行的4.5.0。
有关更多信息,请遵循以下问题:https://github.com/ionic-team/ionic/issues/18632
答案 1 :(得分:0)
将“ @ ionic / angular”降级为“ ^ 4.5.0”效果很好。