a blog for those who code

Sunday 10 April 2016

Implementing Infinite Scroll in Ionic Application

In this post we will be discussing about Infinite Scroll in Ionic Framework. Infinite scroll means that whenever you gets to the bottom of the page or near the bottom of the page, it will load new and fresh content for example Facebook. Infinite Scroll is necessary because on the initial load you do not want to load each and every thing.

Infinite Scroll will also help you to reduce the initial load time because when you are loading your application you want only new or important things to be loaded. Others or say less important can be loaded by the user if he want to using Infinite Scroll. So enough talking lets start creating our application.

Code for Infinite Scroll:

We will be using ion-infinite-scroll directive which allows you to call a function whenever the user gets to the bottom of the page or near the bottom of the page. Basic Usage :

<ion-infinite-scroll on-infinite="loadmore()" distance="2%"></ion-infinite-scroll>

The expression you pass in for on-infinite (points to $scope function) is called when user scrolls greater than distance (2% in our case) away from the bottom of the content.

Our page1.html looks like below :

<ion-view view-title="Infinite Scroll">
 <ion-content class="padding">
  <ion-refresher pulling-text="Update Date" on-refresh="doRefresh()"></ion-refresher>
  <ion-list>
   <ion-item collection-repeat="value in values">
    <p>First Name : {{value.first_name}}</p>
    <p>Last Name : {{value.last_name}}</p>
   </ion-item>
  </ion-list>
  <ion-infinite-scroll on-infinite="loadmore()" distance="2%"></ion-infinite-scroll>
 </ion-content>
</ion-view>

Our Controller will look like below where in our loadmore function we are concatenating new values with the old ones. For the sake of understanding we are creating two variable in our windows element for data. After concatenating the data we need to broadcast the scroll.infiniteScrollComplete event.

.controller('repeaterCtrl', function ($scope, $ionicFilterBar) {
 $scope.values = window.Values.sort(function (a, b) {
  return a.first_name > b.first_name ? 1 : -1;
 });
 $scope.doRefresh = function () {
  $scope.values = window.Values;
  $scope.$broadcast('scroll.refreshComplete');
 }
 $scope.loadmore = function () {
  $scope.values = $scope.values.concat(window.MoreValues);
  $scope.$broadcast('scroll.infiniteScrollComplete');
 }
})

We will also create a variable called Values and MoreValues in our window element from which the data will be fed to our controller :

window.Values = [{ first_name: "Chris", last_name: "Jordon" },
    { first_name: "Hemant", last_name: "Joshi" },
    { first_name: "Apple", last_name: "Pie" },
    { first_name: "Sachin", last_name: "Tendulkar" },
    { first_name: "Shewag", last_name: "Paji" },
    { first_name: "Mahendra", last_name: "Singh" },
    { first_name: "Ajinkya", last_name: "Rahane" },
    { first_name: "Sunil", last_name: "Gavaskar" },
    { first_name: "Yuvraj", last_name: "Singh" },
    { first_name: "Harbajan", last_name: "Singh" }];


window.MoreValues = [{ first_name: "AB", last_name: "De-villers" },
    { first_name: "Ricky", last_name: "Ponting" },
    { first_name: "Rohit", last_name: "Sharma" },
    { first_name: "Shikhar", last_name: "Dhawan" }];

Result :

As you can see in the below image, when I went to the bottom of the page, it loaded values from MoreValues.


Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

2 comments:

  1. Your blog is awesome..You have clearly explained ...Its very useful for me to know about new things..Keep on blogging..
    SEO Training in Chennai

    ReplyDelete
  2. Try to make the tutorial by using dynamic data may be JSON return.
    Thank you

    ReplyDelete