angular - 离子4无限卷轴

问题描述

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


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

欢迎任何答案。

标签： angularionic-framework

angular - 离子4无限卷轴

问题描述

解决方案

推荐阅读