在做项目的时候一般会遇到下拉刷新的功能，我不知道大家平时是怎么实现的。因为我们现阶段使用的是ionic，所以我就学习了一下利于框架去实现下拉刷新的功能。下面给家说一下怎么用ionic实现页面的下拉刷新吧。

具体的实现请看下面的源码：

HTML 代码

ion-refresher： 即为下拉刷新的图标；

pulling-text=“下拉刷新” 这里的问题可以随意更换，喜欢就好；

on-refresh=”doRefresh()” 这个便是当下拉的时候我们要执行的方法，这里便是刷新页面的数据。

<bodyng-app="starter"ng-controller="actionsheetCtl"><ion-pane><ion-content><ion-refresherpulling-text="下拉刷新"on-refresh="doRefresh()"></ion-refresher><ion-list><ion-itemng-repeat="iteminitems"ng-bind="item.name"></ion-item></ion-list></ion-content></ion-pane></body>JavaScript 代码

$scope.items[ ] 这个是页面刚进来的数据

doRefresh() 显然这个是当你要刷新的时候所执行的方法

item.json这个就是当你点击刷新后我们就要从新获取数据 这个json就是最近的数据，项目中就是你要从新从服务器拿一次数据并且更新到客户端。

angular.module('starter',['ionic']).run(function($ionicPlatform){$ionicPlatform.ready(function(){//Hidetheaccessorybarbydefault(removethistoshowtheaccessorybarabovethekeyboard//forforminputs)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.aliyue.net/demo_source/item.json').success(function(newItems){$scope.items=newItems;}).finally(function(){$scope.$broadcast('scroll.refreshComplete');});};}])item.json 文件数据：

[{"name":"菜鸟教程"},{"name":"www.aliyue.net"}]

今天就介绍到这里，小伙伴自己动手试试吧，改天给大家分享 ionic怎么实现上滑加载更多。祝大家学习愉快。 有什么疑问可以加群找我讨论。欢迎大家哦！

=============================

小月博客：http://www.aliyue.net

小月博客web技术交流 308649768

=============================