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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

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

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.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Anton

    Hi dragan. Don’t you have such kind example for Ionic2.