Tutorialsplane

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

Ionic Infinite Scroll:

<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">		 
		     {{item}}
</li>
  </ul>
  </ion-list>

  <ion-infinite-scroll 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-

Ionic Infinite Scroll Controller Example

.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
  });
  };
});  

Try it »

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

Ionic Tutorials

Ionic Components

Javascript Components