Ionic Pull-to-Refresh
When loading new data, we need to implement the pull-to-refresh effect. The code is as follows:
Example
HTML Code
<body ng-app="starter" ng-controller="actionsheetCtl">
<ion-pane>
<ion-content>
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
JavaScript Code
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('actionsheetCtl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {
$scope.items = [
{
"name": "HTML5"
},
{
"name": "JavaScript"
},
{
"name": "Css3"
}
];
$scope.doRefresh = function() {
$http.get('http://www.tutorialpro.org/try/demo_source/item.json') // Note to change to your own site's address, otherwise there will be cross-domain issues
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])
item.json File Data:
[
{
"name": "tutorialpro.org"
},
{
"name": "www.tutorialpro.org"
}
]
The effect is as shown below: