Question

我正在使用Ionic 3开发应用程序。在我的一页中，我正在使用文档https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/中指定的ion-inifinite-scroll？

基本上，我在该页面中显示离子卡，该页面使用a，b，c等类别进行了分类。首次加载该页面时，将仅提取和显示一个类别卡。滚动时，我将获取下一个类别。在某些情况下，一个类别中的卡片数量会减少，并且页面无法完全填充。那时，当我尝试滚动时，未触发ioninfinite事件。

任何帮助我该如何实施？

此外，在jquery无限滚动中，我们有一个称为prefill的选项，当设置为true时，将加载内容，直到页面被填充为止。离子无限滚动是否有类似的选择？

html

<pre>
<ion-content>
<ion-card *ngFor="let item of items"> </ion-card>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" 
[enabled]="infiniteScrollEnable">
<ion-infinite-scroll-content loadingText="Checking more items..."></ion- 
infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</pre>

ts:
doInfinite(infinteScroll) {
// api call for next category items
}

Answer 1

如果有人仍然有这个问题，我可以这样解决，所以我在底部可以滚动到100px。

.bottom-div {
    height: 20px;
    position: absolute;
    bottom: -10px;
}

...
<div class="bottom-div">&nbsp;</div>
</ion-content>

如果页面内容的高度小于页面高度，则不会触发ioninfinite事件

1 个答案: