,

Check/ Detect If Ionic View/ Page Reached Bottom Load Infinite Data

Like native Android apps, we sometimes need a view, where list items can be loaded after user reached the bottom of all loaded list items. This behavior is recommended if we have a long list to load and we don’t want the user to tap next every time to view next set of list items. So we…

By.

min read

Like native Android apps, we sometimes need a view, where list items can be loaded after user reached the bottom of all loaded list items. This behavior is recommended if we have a long list to load and we don’t want the user to tap next every time to view next set of list items.

So we will do basically two things:

  1. How to Check If User Reached Bottom of Page/ View in Ionic App?

  2. How to Auto Load Infinite List of Records from API call in Single Ionic View?

 

Ionic 4 : Check Updated Article on Scroll Events Here

Let’s begin…

Step 1) – In Our controller, we need to add an Ionic service $ionicScrollDelegate, then our controller will look something like this

...
.controller('WallCtrl', function($scope, $ionicScrollDelegate) {

})
...

 

Step 2) – Now we need to add some events in HTML which will call our Scroll function from the controller.

We will add on-scroll-complete=”checkScroll()” on our content HTML like below:

NOTE: I have used on-scroll-complete event Instead on on-scroll, becouse if we use on-scroll it will file on every pixel movement which can call api multiple times

<ion-view view-title="Wall">
    <ion-content on-scroll-complete="checkScroll()">
        <div class="list" ng-repeat="w in data.wallList">
        </div>
    </ion-content>
</ion-view>

 

Step 3) – In the controller, we will write logic to check if the view reached the bottom.

 $scope.checkScroll = function() {
     var currentTop = $ionicScrollDelegate.getScrollPosition().top;
     var maxTop = $ionicScrollDelegate.getScrollView().__maxScrollTop;
     if (currentTop >= maxTop) {
         // hit the bottom
         // Call API to Load Data
             $scope.loadNextRecords();
     }
 };

In above function $scope.loadNextRecords() will call more records and push to existing list.

Sometimes this we may want to call loadNext immediately when the user reaches the middle of the list, for that we can adjust values of  currentTop and maxTop accordingly.

Check Demo link, check console.log on link

Let me know if you have any feedback issues of better suggestion in comments below 🙂

 

5 responses to “Check/ Detect If Ionic View/ Page Reached Bottom Load Infinite Data”

  1. prabu Avatar
    prabu

    on-scroll-complete nor triggering after i reached bottom

    1. Jolly.exe Avatar
      Jolly.exe

      Hi Prabu, if you are testing in the browser it will trigger when you scroll using mouse cursor and not mouse wheel after scroll stops. I have also added a demo link. You can check the console for triggered events.

  2. Vishakha Vaidywan Avatar
    Vishakha Vaidywan

    Nice solution…but the event fires when every single scroll stroke ends, what if the requirement is to fire the event after the page content end is reached, i.e. the last list item is reached?

  3. prashanthraj Avatar
    prashanthraj

    hi! i did what you have said but the ‘checkscroll ()’ function is not firing while scrolling ?

    1. Jolly.exe Avatar
      Jolly.exe

      Hello, please check if your view is having enough content to show scroll when loaded? and also verify if all steps are followed 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *