Pull To Refresh is another functionality made popular by the advent of mobile devices. Where Infinite Scroller works from the bottom, Pull To Refresh works from the top. The idea is to pull new data from the top of the page on vertical swipe, a loader should appear, and new content should become visible, simple as that.
Ionic Framework supports this feature through the ons-pull-hook directive. This article will also use another framework called Faker.js; it will generate fake data required to populate a list view in our example. We will call it again each time we initialize pull-to-refresh functionality.
Table of Contents
[spoiler title=” Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins …”]
Tutorials
- Series 1 | Installation
- Series 2 | Anathomy of a Page
- Series 3 | UI Patterns
- Series 4 | Mixing UI Patterns
- Series 5 | Master Detail Pattern
- Series 6 | Side Menu Pattern
- Series 7 | Tab Pattern
- Series 8 | Page Navigation
- Series 9 | Passing Data Between Pages
- Series 10 | Form Handling And Validation
- Series 11 | Infinite Scroll
- Series 12 | Pull To Refresh
- Series 13 | Touch Gestures
- Series 14 | Grid System
- Series 15 | Storing data in Ionic Framework
- Series 16 | Using Google Maps With Ionic Framework
- Series 17 | Ionic Framework | Get Page Height & Width
- Series 18 | Understanding Ionic View LifeCycle
- Series 19 | Using Views Events To Create JavaScript Pure Ionic Splash Screen
- Series 20 | Handling Android Back Button Like a Pro
- Series 21 | How to Properly Debug Your Ionic Application
- Series 22 | Creating a Transparent NavBar In Ionic Framework
- Series 23 | What’s the difference between Cordova and Ionic ready state
- Series 24 | Why is The .dot Notation Important in Ionic Framework?
- Series 25 | Programmatically Show Ion List Options Buttons in Ionic Framework
- Series 26 | How to Create Elegant Slider Carousel in Ionic Framework
- Series 27 | Speed Up Your Ionic Application Using These Techniques
Other Resources (themes, templates, plugins, Cordova plugins, starter apps)
- Best Looking Ionic Framework Themes
- Must-have plugins for Ionic Framework
- A Comprehensive List Of Ionic Starter Apps
- Useful Cordova Plugins For Your Ionic Application & Examples
- 15 Great Inspirational UI Theme Designs For Ionic Framework
Cordova Plugin Tutorials
- Changing & Locking Screen Orientation In Ionic Application
- Using Smartphone Camera With Ionic Framework
- Whitelist External Resources and API Calls | Ionic Framework
- Using Cordova Geoloacation API with Google Maps in Ionic Framework
- How to Launch External Application With Ionic Framework
- Using Cordova File Transfer Plugin With Ionic Framework
- How to send an SMS with Ionic Framework and ngCorodva
- How to use Local Notifications with Ionic Framework
- How to Search, Create, and Delete Contacts Using Ionic Framework
- How to Open a File using its default application in Ionic Framework
- How to Show Different Native Modal Windows In Ionic Framework
- Accessing Image Galery using Ionic and ngCordova
- Detecting Device Motion With Ionic Framework and ngCordova
- Handling Native View Animations With Ionic Framework
- Retrieving IP Adress Using Cordova Without External Services
- Using Google AdMob in Your Android Ionic Application
[/spoiler]
Intro
<ion-refresher pulling-text="Refreshing..." on-refresh="populateList()"> </ion-refresher>
The ion-refresher directive allows you to add pull-to-refresh to a scrollView. Place it as the first child of your ionContent or ionScroll element.
The expression you pass in for on-refresh is called when the user initiates pull-to-refresh.
Example
A short walk through, when this example first initializes it will generate ten random list elements; every call to ion-refresh function will produce one additional list item at the list top.
Embedded working 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="Pull To Refresh Example"> <ion-content class="padding"> <ion-refresher pulling-text="Refreshing..." on-refresh="populateList()"> </ion-refresher> <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-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.populateInitialList = function() { for (var i = 0; i <= 9; i++) { $scope.populateList(); } } $scope.populateList = function() { var firstName = faker.name.firstName(); var lastName = faker.name.lastName(); $scope._list.unshift({ name: firstName + " " + lastName, address: faker.address.streetAddress(), phone: faker.phone.phoneNumber(), image: faker.internet.avatar() }); $scope.$broadcast('scroll.refreshComplete'); } $scope.populateInitialList(); });
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.populateInitialList();
Application is calling these functions:
$scope.populateInitialList = function() { for (var i = 0; i <= 9; i++) { $scope.populateList(); } } $scope.populateList = function() { var firstName = faker.name.firstName(); var lastName = faker.name.lastName(); $scope._list.unshift({ name: firstName + " " + lastName, address: faker.address.streetAddress(), phone: faker.phone.phoneNumber(), image: faker.internet.avatar() }); $scope.$broadcast('scroll.refreshComplete'); }
Initially it will generate ten fake list elements using Faker.js.
Above list directive you’ll find pull-to-refresh directive:
<ion-refresher pulling-text="Refreshing..." on-refresh="populateList()"> </ion-refresher>
It’s configured to trigger a function populateList() when user pull to refresh.