离子4无限滚动

时间:2019-07-08 07:24:57

标签: angular ionic-framework

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


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

欢迎任何答案。

2 个答案:

答案 0 :(得分:0)

这是Ionic的最新版本(我相信是4.6.0)的一个已知问题。当前的解决方案是将其降级到仍在运行的4.5.0。

有关更多信息,请遵循以下问题:https://github.com/ionic-team/ionic/issues/18632

答案 1 :(得分:0)

将“ @ ionic / angular”降级为“ ^ 4.5.0”效果很好。