离子2-无限滚动在第二次滚动时不调用方法



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

问题

  1. 默认情况下加载 20 条记录
  2. 滚动时,它会再加载 20 个。
  3. 但在第二次滚动时,它只显示旋转动画,但不加载任何记录。也就是说,在第二个滚动中,它根本不调用loadInboxList方法。所以很明显,loadInboxList方法没有错,因为它在第二个卷轴上根本没有被调用。

我的离子和科尔多瓦版本

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

任何帮助将不胜感激

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

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

编辑

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

它应该看起来像这样:

(ionInfinite)="loadInboxList($event)"

并在您的 .ts 中

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

相关内容

  • 没有找到相关文章

最新更新