When you are doing projects, the pull-down refresh function is very common, so how do you implement it? Below, the editor will introduce to you how to use Ionic to implement the page drop-down refresh function. Let’s take a look!
For specific implementations, please refer to the following source code:
HTML Code
ion-refresher: is the icon that is refreshed by pull-down;
pulling-text="pulling down refresh" The questions here can be replaced at will, just like it;
on-refresh="doRefresh()" This is the method we need to execute when pulling down. Here is the refreshing page data.
<body ng-app="starter" ng-controller="actionsheetCtl" ><ion-pane><ion-content ><ion-refresher pulling-text="drop-down 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
$scope.items[ ] This is the data that just came into the page
doRefresh () Obviously this is the method you execute when you want to refresh
item.json This is when you click to refresh and we need to re-get data. This json is the latest data. In the project, you need to re-get data from the server and update it to the client.
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() {//Please note that you change to the address of your site, otherwise there will be cross-domain problems$http.get('http://www.aliyue.net/demo_source/item.json') .success(function(newItems) {$scope.items = newItems;}).finally(function() {$scope.$broadcast('scroll.refreshComplete');});};}])item.json file data:
[{"name":"Rookie Tutorial"},{"name":"www.aliyue.net" } ]Ionic implements page drop-down refresh (ion-refresher function) and will introduce you so much. In the future, I will introduce you how to implement slide-up loading and more functions. Please continue to pay attention to the exciting content brought to you by Wulin.com.