With the advent of mobile devices, an infinite scroll functionality became a very popular feature. This feature is similar in nature to pull-to-refresh though, in this case, as the user scrolls, an application is loading additional content to the bottom of a list. Data is fetched in batches as needed, pulling a fixed number of records at a time.
 
The Ionic Framework can do this easily using the ion-infinite-scroll directive. This article will cover everything you need to know about this feature, you will also find a working example.
 
This statement may sound silly, but this is a highly important feature. Without it, as a number of list elements rises, our application would gradually become slower and slower. Hybrid mobile applications just can’t handle a large number of list items; I managed to witness that while I was working with jQuery Mobile. Nothing changed since that time; even modern mobile frameworks can’t compete with native application scrolling.
 
 

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

Intro

 
<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()"
  distance="1%">
</ion-infinite-scroll>
 
The ionInfiniteScroll directive allows you to call a particular function whenever the user scrolls near or to the bottom of the page.
 
The expression you pass in for on-infinite is called when the user scrolls greater than distance (configured in the distance attribute) away from the bottom of the content. Once on-infinite is done loading new data, it should broadcast the scroll.infiniteScrollComplete event from your controller.
 
The expression you pass for ng-if requires true/false to determine if infinite scrolling is enabled or disabled.
 
Warning: Do not forget to broadcast scroll.infiniteScrollComplete event, infinite scrolling will not work without it after first sucesfull function call.
 

Example

 
This example will use a Faker.js framework. For those of you who never heard of this framework, it’s used for data faking. I reviewed it (plus few more frameworks) in one of my earlier articles; find it here.
 
A short walk through, when this example first initializes it will generate ten list elements; every call to on-infinite function will produce ten additional list items (each time you scroll to the bottom).
 
Demo
 

Embedded working example

 
Ionic Framework Infinite Scroll Example
 

HTML:

<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="http://marak.com/faker.js/js/faker.js"></script>
  <script src="script.js"></script>
</head>
 
<body>
  
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="home.html" type="text/ng-template">
    <ion-view view-title="Infinite Scroll Example">  
    
      <ion-content class="padding">

        <ion-list>
          <ion-item collection-repeat="list in _list" class="item-thumbnail-left">
            <img ng-src="{{list.image}}">
            <h2>{{list.name}}</h2>
            <p>{{list.address}}</p>
            <p>{{list.phone}}</p>            
          </ion-item>
        </ion-list>
        
        <ion-infinite-scroll 
            ng-if="canWeLoadMoreContent()"
            on-infinite="populateList()"  
            distance="1%">
        </ion-infinite-scroll>        

      </ion-content>
      
    </ion-view>
  </script>  

</body>
 
</html>

JavaScript:

var nameApp = angular.module('starter', ['ionic']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });
  $urlRouterProvider.otherwise("/");
 
});


nameApp.controller('HomeCtrl', function($scope) {
  
  $scope._list = [];  

  $scope.populateList = function() {
    for (var i = 0; i <= 9; i++) {
      
      var firstName = faker.name.firstName();
      var lastName = faker.name.lastName();      
      
      $scope._list.push({ name: firstName + " " + lastName, 
                          address: faker.address.streetAddress(),
                          phone: faker.phone.phoneNumber(),
                          image: faker.internet.avatar()
      });
    }    
    console.log($scope._list.length);
    $scope.$broadcast('scroll.infiniteScrollComplete');    
  }

  $scope.canWeLoadMoreContent = function() {
    return ($scope._list.length > 49) ? false : true;
  }  
  
  $scope.populateList();

});

Walkthrough

 
When HomeCtrl controller first initializes it will create an empty _list object; we’ll use it to store application list data:
 
$scope._list = [];  
 
JavaScript will immediately populate it using a function call:
 
$scope.populateList(); 
 
Application is calling this function:
 
  $scope.populateList = function() {
    for (var i = 0; i < 9; i++) {
      
      var firstName = faker.name.firstName();
      var lastName = faker.name.lastName();      
      
      $scope._list.push({ name: firstName + " " + lastName, 
                          address: faker.address.streetAddress(),
                          phone: faker.phone.phoneNumber(),
                          image: faker.internet.avatar()
      });
    }    
    $scope.$broadcast('scroll.infiniteScrollComplete');    
  }
 
It generates ten list elements per call using Faker.js to autogenerate fake data.
 
Beneath list directive you’ll find infinite scroll directive:
 
<ion-infinite-scroll 
    ng-if="canWeLoadMoreContent()"
    on-infinite="populateList()"  
    distance="1%">
</ion-infinite-scroll> 
 
It’s configured to trigger a function populateList() when a distance from the bottom reach 1%. This example will show max. 50 elements, it will disable infinite scrolling if number of list elements surpass that number. Disabling/enabling can be achieved using an expression we’re sending through ng-if attribute:
 
$scope.canWeLoadMoreContent = function() {
    return ($scope._list.length > 49) ? false : true;
}  
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.