Ionic Infinite Scroll
The infinite scroll component is used to call an action to be performed when the user scrolls a specified distance from the top or bottom of the page. It is very useful when we have to show a large set of data at once.
Every mobile application needs a way to show the huge set of data in a lesser number of clicks. In that case, the infinite scroll plays an essential role for them. The infinite scroll component works like we load ten items on a page. Now, when the user scrolls those items and reaches close to the bottom, it makes a new data request. This request gets the next set of records items that will be added to the existing items. This process is repeating until the new data is not found in chunks as user scrolls.
You can understand it more clearly when you scroll the Facebook, Instagram, or Twitter news feed area. The page always loads new posts, and you will see a loading spinner on the bottom of the screen.
You can access the infinite scroll by using the standard <ion-infinite-scroll> and <ion-infinite-scroll-content> component. The expression (ionInfinite) = “loadData($event)” assigned in the <ion-infinite-scroll> is called when the user reaches close to the defined distance. When it finished all tasks, it will call the complete() method on the infinite scroll instance. The threshold properties tell the distance from the bottom of the content to call the infinite output content when scrolled.
Infinite Scroll Content
It is the child component of the component, which is used to display content. It also changes the look of the scrolling, which depends on the infinite scroll?s state. It contains the options for scrolling like loadingSpinner, loadingText, etc.
Note: The <ion-infinite-scroll> component does not support in the ReactJS.
The following example explains how the Ionic Scroll component works in the application.
Example
Home.page.html
This HTML page calls the event to display the infinite scrolling content. Here, the expression [disabled] = “numTimesLeft <= 0” is used stop the scrolling. We also customize the types of loading spinner and loading message, which shows up when the method is called, and data loading is in process.
Home.page.ts
In this file, we are going to use for loop method to add dummy data on page load. The loadData() method is called when the list is reached at the bottom of a page. And last, the complete() method is called that will stop the loader.
Output
When you run the application, it will give the following output.
Now, when the list reached the bottom of a page, the page is repeating until the new data is not found in chunks as user scrolls.
