Pages

How to implement Infinite Scrolling in ionic 2 and ionic 3

Ionic Framework has a predefined element called ion-infinite-scroll which allows you to perform an action when the user scrolls a specified distance from the bottom or top of the page.

let's create a page with name infinitescroll, using the below given command.

ionic generate page infinitescroll

 This will create a infinitescroll folder in src/pages folder in your projects root directory.which contains four files.

1. infinitescroll.html
2infinitescroll.module.ts
3. infinitescroll.ts
4. infinitescroll.scss

 if infinitescroll.module.ts is not created by ionic cli, you should import InfinitescrollPage into app.module.ts as below.

 
import { InfinitescrollPage } from '../pages/infinitescroll/infinitescroll';


The above line tells the app that a page named InfinitescrollPage is available at the particular location. Now Check to see if your project is running properly, without any errors.

Now since, the page is created and working fine, let's go to the coding part.


Copy and Paste the Below HTML Code to infinitescroll.html page.


  <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Infinite Scroll</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  
   <ion-list style="background: #e0e0e0;" no-lines>
     <ion-item *ngFor="let i of items" style="margin-bottom: 2px;">{{i}}</ion-item>
   </ion-list>
  
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
  
  </ion-content>

ionInfinite event will be fired when the scroll reaches the threshold distance. here we will be calling doInfinite method by passing $event parameter.


Copy/Replace the Below ts Code to your infinitescroll.ts page.


    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';

    @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
    })
    export class HomePage {
    items = [];
    constructor(public navCtrl: NavController) {
        for (let i = 0; i < 30; i++) {
        this.items.push( "The Number is "+this.items.length );
        }
     }
    doInfinite(infiniteScroll) {
        console.log('Begin async operation');

        setTimeout(() => {
        for (let i = 0; i < 30; i++) {
            this.items.push( "The Number is "+this.items.length );
        }

        console.log('Async operation has ended');
        infiniteScroll.complete();
        }, 500);
    }
    }   
    
Here in the constructor we are initiating a for loop which loops for 30 times and pushes data to items array. Now When ever we scroll to the bottom of the list in this case the 30th item, infinite scroll triggers and calls the doInfinite method along with the event which specifies, from which index to get the data and push to items array. 

when the async process is complete we should stop the infinite scroll process or else the loader will be shown infinitely. To stop the infinite scroll process , you should call the infinite scroll's complete() method from within the infinite handler.

that's it, check your browser to see if its working. Comment below if you have and queries or any doubt's regarding the above code implementation.

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: