Ionic实现页面下拉刷新(ion

Ionic实现页面下拉刷新(ion

在平常做项目时下拉刷新功能非常常见，那么大家都是怎么实现的呢？下面给大家介绍如何使用Ionic实现页面下拉刷新(ion-refresher功能，一起看看看吧！

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

HTML 代码

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

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

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

javascript 代码

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

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

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

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function(http://) {

// 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://aliyue.net/demo_source/item.json')

.success(function(newItems) {

$scope.items = newItems;

})

.finally(function() {

$scope.$broadcast('scroll.refreshComplete');

});

};

}])

item.json 文件数据：

[

{

"name":"菜鸟教程"

},

{

"name":"aliyue.net" }

]

关于Ionic实现页面下拉刷新(ion-refresher功能就给大家介绍这么多，后续还会给大家介绍ionic怎么实现上滑加载更多的功能，请大家继续关注我们给大家带来的精彩内容。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。