Infinite scroll (ionInfinite) only triggering once


#1

I’ve been racking my brain over this for two days now. I’ve followed multiple tutorials and read the docs and the API.

here is the HTML for my project’s page:

 <ion-list>
        <ion-item *ngFor="let card of filteredCards" text-center>
            <img class="card" [src]="card.levels[0].levelImage"
                 [width]="cardWidth"
                 [height]="cardHeight"
                 (click)="showCardSummaryPage(card)">
        </ion-item>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="addScrollCards($event)" *ngIf="infiniteScrollEnabled">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

Here is the Page components addScrollCards function:

private addScrollCards( event ) {

        this.currentChunk++;
        if (this.chunkedCards[this.currentChunk]) {
            this.filteredCards.push(...this.chunkedCards[ this.currentChunk ]);
        } else {
            this.infiniteScrollEnabled = false;
        }
 }

No matter what I try. The addScrollCards only executes one time. The first array gets added to the filteredCards array, then nothing. The spinner still shows on the page, so I’m not sure why it isn’t running the addScrollCards function.

Any help or push in the right direction would be greatly appreciated.

NOTE: I have tried VirtualScroll with ion-img but that is nowhere near production ready. It’s buggy and extremely inconsistent.


#2

the key is a very important function which needs to be called exactly in the right time… i have been exactly to your situation and spent a lot of time to figure out what is wrong…
for older ionic versions you need to do:

$event.state = "closed";

and new ionic:

event.complete();

so you need to change your function to this:

private addScrollCards( event ) {

        this.currentChunk++;
        if (this.chunkedCards[this.currentChunk]) {
            this.filteredCards.push(...this.chunkedCards[ this.currentChunk ]);
            event.complete();
        } else {
            this.infiniteScrollEnabled = false;
        }
 }

#3

Really you saved my day bro…
Thanks a lot