CODEWITHSUNDEEP
javascripthtmlangularionic3infinite-scroll
Rubha Shree R
Rubha Shree R

Reputation: 31

ioninfinite event is not triggered if the height of contents of the page is less than the page height

I am using ionic 3 to develop an app. In one of my page i am using the ion-inifinite-scroll as specified in the documentation https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/?

Basically i am displaying ion cards in that page which is categorised using some categories like a, b, c etc., When the page is first loaded, only one category cards will be fetched and shown. On scrolling, i will fetch the next category. In some scenario the number of cards in one category will be less and the page will not be filled completely. At that time, when i try to scroll, ioninfinite event is not getting triggered.

Any help how can i implement this?

Also, in jquery infinite scroll, we have an option called prefill, when set to true the contents will be loaded until the pages is filled. Is there an option like that for ion-inifinite-scroll?

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
}

Upvotes: 3

Views: 1250

Answers (1)

nosTa
nosTa

Reputation: 658

if anybody still has that problem I solved it that way, so I have 100px at the bottom where i can scroll to.

.bottom-div {
    height: 20px;
    position: absolute;
    bottom: -10px;
}
...
<div class="bottom-div">&nbsp;</div>
</ion-content>

Upvotes: 2

Related Questions