Infinite Scroll

What is Infinite Scroll

The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page. This is what you see when you quickly scroll Facebook or Instagram feed, and the page loads new posts, while you see a loader spinning on the bottom of the screen

This is useful when you have huge amount of data, but you only fetch a small chunk at a time for a faster app experience, or saving data for users.

Infinite Scroll in Ionic 4 Full App

The infinite scroll is located in src/app/pages/addons/infinite

To use this functionality, you put the ion-infinite-scroll at the bottom of ion-contentin your page

  <ion-infinite-scroll #infiniteScroll (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

ion-infinite-scroll-content contains the elements which will show when the page is loading new content. You can put text, images or GIFs here as per your app design.

Importing

You can include infinite scroll functionality by importing it in your page.ts

import { IonInfiniteScroll } from '@ionic/angular';

and

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

Loading more data

(ionInfinite)="loadData($event)" is basically an ionInfinite listener implemented, which fires on a scroll event when you reach the bottom of the page on scrolling. It then calls a function loadData (or any function you want), and you can implement the proper logic to fetch more data.

In Full App, we fetch more data from an API, with 5000ms delay

this.util.infiniteData().subscribe((data:Array<any>) => {
      data.forEach(element => {
        this.loadedData.unshift(element)
      });
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.loadedData.length > 30) {
        this.util.presentToast('No more data available', true, 'bottom', 1500);
        event.target.disabled = true;
      }
    })

event.target.complete(); tells the app that the infinite scroll action (loading more data) is completed, and the loader can be hidden.

You should disable the Infinite Scroll functionality once all the data has been fetched. This will require a custom logic on your end. For demo purpose, we stop fetching more data when the list item count exceeds 30.