Ionic Infinite Scroll

Ionic Infinite Scroll – ionInfiniteScroll directive allows you to call a function when user reaches at the bottom of the page. The ionInfiniteScroll is basically child of ionContent or ionScroll. on-infinite is used to call the function on scroll event when user reaches at the bootom of the page. Here in this tutorial we are going to explain how to call the function on on-infinite on infinite scroll.

Ionic Infinite Scroll

Here is very basic and simple example of ionInfiniteScroll

Ionic Infinite Scroll : Html Part

<ion-content ng-controller="MainCtrl">
  <ion-list>
  <ul class="list">
  <li class="item">
   Item 1   
  </li>
 
  <li class="item">
   Item 2
   
  </li>
  <li class="item">
   Item 3
   
  </li>
  <li class="item">
   Item 4
   
  </li>
  <li class="item">
   Item 5
   
  </li>
<li class="item" ng-repeat="item in items" style="" >		 
		     {{item}}
</li>
  </ul>
  </ion-list>

  <ion-infinite-scroll
    on-infinite="loadMoreData()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

Let us create javascript part with controller and function to call the function when user scrolls on the bootm of the screen.

Ionic Infinite Scroll : Controller Part

The controller part contains the following function to load the data from server-

.controller('MainCtrl', function($scope, $http) { 
$scope.items = [];
$scope.loadMoreData = function() {
$http.get('url_to_load content').then(function(resp) {
     $scope.items = resp.item;// json format replace with your data format returned from server
     $scope.$broadcast('scroll.infiniteScrollComplete');
     
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });
  };
});  

The above example loads data from server when you scroll to the bottom of the screen. The above example will produce the output something like this –

Options

• on-infinite [expression] – Used to call when the scroller reaches at the bottom of screen.
• distance [optional(string)]– The distance from bottom when the function shoud be called Default distance is 1%.
• spinner [optional(string)] – The ionSpinner to show when loading.
• icon [optional(string)] – This is used to specify the icon to show while loading.
• immediate-check [optional(boolean)] – This is used to check the infinite scroll bounds immediately on load.

Add Comment

📖 Read More

• 1. Ionic Side Menus