与Ionic2中的离子无限滚动有关 [英] Related to ion-infinite-scroll in Ionic2

问题描述

我在Ionic2应用程序中遇到了 ion-infinite-scroll 的问题。请找到以下代码。

I am facing an issue with ion-infinite-scroll in my Ionic2 application. Please find the below code.

<ion-infinite-scroll (ionInfinite)="doInfinite()" distance="5%">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
            </ion-infinite-scroll-content>
</ion-infinite-scroll>

doInfinite（）方法

doInfinite() method

doInfinite(){
    if(this.myReportList.length < this.reportCount){
        console.log("Inside doInfinite if");
        this.loadMore=true;
        this.startFrom = this.endTo+1; // for the time time the value of startFrom is 0 and endTo is 10.
        this.endTo = this.endTo+10;
        this.viewMyReports();
    }else{
        console.log("Inside doInfinite else");
        this.loadMore=false;
        this.genericService.showToast("Reached Bottom")
    }
}

在我的例子中，仅在前2次调用 doInfinite（）方法。即使 if（this.myReportList.length< this.reportCount）{
为真。谁能告诉我为什么这个方法没有被调用？

In my case the doInfinite() method is invoked only for the first 2 times . Even though if(this.myReportList.length < this.reportCount){ is true . Could anyone please tell me why the method is not invoking ?

说我的总数是多少50，这是我第一次列出前10条记录，然后当我到达报告结束时再次使用调用 doInfinite（）方法startFrom 和 endTo 分别为11和20。但是第三次​​开始 ion-infinite-scroll 没有调用该方法。
请帮帮我。

Say I am having a total count of 50 and for the first time i am listing first 10 records , then when I reach the end of reports it again call the doInfinite() method with startFrom and endTo 11 and 20 respectively . But for the third time onwards the ion-infinite-scroll is not invoking the method . Please help me with this .

this.viewMyReports（）; 是从我获取报告的API调用

this.viewMyReports(); is the API call from where I am getting the reports

<ion-card *ngFor="let XX of responseList">
            <ion-item>
                <ion-row>
                    <ion-col col-7>
                        <p {{XX.***}}</p>
                        <p {{XX.***}}</p>
                    </ion-col>
                    <ion-col col-5>
                        <p> Submitted</p>
                        <p >{{XX.***}}</p>
                    </ion-col>
                </ion-row>
            </ion-item>
            <ion-card>

谢谢和问候

Anand Raj

Anand Raj

推荐答案

您缺少 infiniteScroll.complete（）;

当
异步操作完成时，在无限输出事件处理程序中调用complete（）。例如，加载状态是
应用程序正在执行异步操作，例如从AJAX请求接收
更多数据以将更多项添加到数据列表。一旦
收到数据并更新了UI，您就可以调用此方法
来表示加载已完成。此方法会将
无限滚动的状态从加载更改为启用。

Call complete() within the infinite output event handler when your async operation has completed. For example, the loading state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll’s state from loading to enabled.

试试这个 -

HTML：

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)" distance="5%">
                <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
                </ion-infinite-scroll-content>
 </ion-infinite-scroll>

TS：

doInfinite(infiniteScroll: any){
    if(this.myReportList.length < this.reportCount){
        console.log("Inside doInfinite if");
        this.loadMore=true;
        this.startFrom = this.endTo+1; // for the time time the value of startFrom is 0 and endTo is 10.
        this.endTo = this.endTo+10;
        this.viewMyReports();
    }else{
        console.log("Inside doInfinite else");
        this.loadMore=false;
        this.genericService.showToast("Reached Bottom")
    }
infiniteScroll.complete();
}

这篇关于与Ionic2中的离子无限滚动有关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！