Ionic 2-无限滚动不调用第二次滚动的方法答案

【问题标题】：Ionic 2- Infinite scroll not calling method on second scrollIonic 2-无限滚动不调用第二次滚动的方法
【发布时间】：2017-07-18 03:37:54
【问题描述】：

我使用ion-tab 来显示包含ion-list 并使用ion-infinite-scroll 的页面(inboxitem)。

我在inboxitem.html中有以下代码

<ion-content class="inbox can-swipe-list">
    <ion-list>
        <ion-list-header>
            <ion-select [(ngModel)]="selectedOption" [selectOptions]="filterOptionSettings" (ngModelChange)="getFilteredList()">
                <ion-option value="{{option.value}}" *ngFor="let option of listInboxFilterOptions; let i=index" [selected]="i==0">{{option.name}}</ion-option>
            </ion-select>
        </ion-list-header>

        <ion-item-sliding *ngFor="let list of inboxList; let j=index">
            <ion-item class="listWithReason" tappable (click)="ViewPopupDetails(j)">
                <h2>
                    <span>{{list.fullname | filterpipes:'manipulatename'}}<br /><small>{{list.leavename}}</small></span>
                    <div> <ion-icon md="md-calendar" ios="md-calendar"></ion-icon> {{list.fromdate}}{{list.todate!=null ? " to ":" " }}{{list.todate}}</div>
                </h2>
                <p *ngIf="list.reason!=''">{{list.reason}}</p>
            </ion-item>

            <ion-item-options side="right" *ngIf="list.empphone=='' || list.empphone==null">
                <button ion-button color="grey" class="no-phone">No phone</button>
            </ion-item-options>
        </ion-item-sliding>

         <ion-item class="item-empty-row" *ngIf="!inboxList.length > 0">
            {{noRecordsFound}}
        </ion-item>
    </ion-list>

    <ion-infinite-scroll *ngIf="infiniteLoading" (ionInfinite)="loadInboxList(false)" distance="1%">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

问题

默认加载 20 条记录
滚动时会再加载 20 个。
但在第二次滚动时它只显示旋转动画，但不加载任何记录。也就是说，在第二次滚动中，它根本不调用loadInboxList 方法。所以很明显loadInboxList 方法没有错，因为在第二次滚动时根本没有调用它。

我的 ionic 和 cordova 版本

Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.9
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.3

我们将不胜感激任何帮助

【问题讨论】：

标签： javascript angular typescript ionic2

【解决方案1】：

确保在 loadInboxList() 中调用 infiniteScroll.complete();。

如果您在代码中调用了infiniteScroll.enable(false)，这将阻止滚动在任何后续滚动上工作，直到您再次启用它。

编辑

现在我注意到您没有在 (ionInfinite) 方法中传递事件 -

应该是这样的：

(ionInfinite)="loadInboxList($event)"

在您的 .ts 中

loadInboxList(infiniteScroll){
     ...your code 
     infiniteScroll.complete()
}

【讨论】：