A pull down effect (pull-to-refresh functionality) to load asynchronous data in ionic 2.

We are going to use "ion-refresher" which comes by default in Ionic. This can be achieved by adding the "ion-refresher" as a child to the "ion-content" HTML. Create a callback function for "ionRefresh" at the respective typescript file. The pulling icon and the spinner is provided by default at the refresher.

HTML - ion-refresher:

ion refresher 1.PNG

 

Script - ionRefresh callback function:

ion refresher 2.PNG

 

Using cancel() and complete() funcitons we can stop the refresher at the page. We have the "states" which returns the current state of the refresher. This includes

States:

  • inactive 
  • pulling 
  • cancelling 
  • ready 
  • refreshing 
  • completing 

Properties:

  • closeDuration        - default -> 280
  • pullMax                 - default -> pullMin + 60
  • pullMin                  - default -> 60
  • snapbackDuration  - default -> 280

SASS vaiables:

  • $refresher-height
  • $refresher-icon-color
  • $refresher-icon-font-size
  • $refresher-text-color
  • $refresher-text-font-size
  • $refresher-border-color

Video:

Page.html file: 
----------------
 <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull Down."
      refreshingSpinner="circles"
      refreshingText="Loading...">
    </ion-refresher-content>
  </ion-refresher>
 
 
 
Page.ts file:
---------------
doRefresh(refresher) {
    console.log('Started', refresher);
    setTimeout(() => {
        console.log('Async operation has ended');
        refresher.complete();
    }, 4000);
}
Category: