与 Ionic2 中的 ion-infinite-scroll 相关

Posted 2023-03-13

【中文标题】与 Ionic2 中的 ion-infinite-scroll 相关

【英文标题】：Related to ion-infinite-scroll in Ionic2

【发布时间】：2017-12-30 02:14:48

【问题描述】：

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

代码

<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()
    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")
    

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

场景

假设我的总数为 50，并且我第一次列出前 10 条记录，然后当我到达报告末尾时，它再次调用 doInfinite() 方法与 startFrom 和 endTo 11 和分别为 20 。但是从第三次开始，ion-infinite-scroll 没有调用该方法。 请帮我解决一下这个 。

编辑

this.viewMyReports(); 是我从中获取报告的 API 调用

html 页面

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

感谢和问候

阿南德·拉杰

【问题讨论】：

@sebaferreras，你能帮我解决这个问题吗？

this.viewMyReports() 是做什么的？ console.log("Inside doInfinite else"); 会打印出来吗？

this.viewMyReports() 是我的 API 调用。 console.log("Inside doInfinite else");只会打印前 1,2 次。之后“ this.viewMyReports() ”没有触发

如果它是第一次打印两次.. 它永远不会去如果.. this.reportCount 值是什么？

总数为 520 。它在 1 ,2 滚动后显示“正在加载更多数据...”，但 api 没有调用

【参考方案1】：

你不见了infiniteScroll.complete();

在无限输出事件处理程序中调用 complete() 异步操作已完成。比如加载状态是while 应用正在执行异步操作，例如接收 来自 AJAX 请求的更多数据以将更多项目添加到数据列表。一次 数据已接收并更新 UI，然后调用此方法 表示加载完成。这种方法会改变 从加载到启用的无限滚动状态。

试试这个-

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

【讨论】：

嗨，我遇到了一个错误。 " ERROR Error: Uncaught (in promise): removeView was not found " .

有装载机吗？

是的。一旦我得到响应，加载程序就会被解雇

注释掉那个加载器并尝试。

评论“this.loader.dismiss();”?