离子4无限卷轴答案

【问题标题】：Ionic 4 Infinite Scroll离子4无限卷轴
【发布时间】：2019-07-08 07:24:57
【问题描述】：

我正在尝试使用无限滚动加载动态数据，但是当我到达底部页面时该事件没有触发。


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

Ionic Infinite Scroll 事件不会在 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);
      }

欢迎任何答案。

【问题讨论】：

在ts 文件中，您是否确保InfiniteScroll 上有@ViewChild()？
是的。@ViewChild(IonInfiniteScroll)infiniteScroll: IonInfiniteScroll;
能否请您添加完整的模板和控制器？
我认为问题在于 if 语句。查看docs 有一个自动禁用它的功能，所以我认为您的 if 语句可能会从一开始就禁用它
也许你对[disabled]="runtimes <= 0" *ngIf="!noRecord"的问题

标签： angular ionic-framework

【解决方案1】：

将“@ionic/angular”降级为“^4.5.0”可以正常工作。

【讨论】：

【解决方案2】：

这是 Ionic 最新版本（我相信是 4.6.0）的一个已知问题。当前的解决方案是降级到 4.5.0，它仍然可以工作。

更多信息请关注本期：https://github.com/ionic-team/ionic/issues/18632

【讨论】：