Ionic实现页面下拉刷新(ion-refresher）功能代码

更新时间：2016年06月03日 16:52:49 作者：小月

这篇文章主要介绍了使用Ionic实现页面下拉刷新(ion-refresher）功能的代码，感兴趣的朋友一起看看吧

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

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

HTML 代码

ion-refresher ：即为下拉刷新的图标；
pulling-text=“下拉刷新” 这里的问题可以随意更换，喜欢就好；
on-refresh=”doRefresh()” 这个便是当下拉的时候我们要执行的方法，这里便是刷新页面的数据。

<body ng-app="starter" ng-controller="actionsheetCtl" >
<ion-pane>
<ion-content >
<ion-refresher pulling-text="下拉刷新" 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 代码

$scope.items[ ] 这个是页面刚进来的数据
doRefresh () 显然这个是当你要刷新的时候所执行的方法
item.json 这个就是当你点击刷新后我们就要从新获取数据这个json就是最近的数据，项目中就是你要从新从服务器拿一次数据并且更新到客户端。

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.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实现页面下拉刷新(ion-refresher功能就给大家介绍这么多，后续还会给大家介绍ionic怎么实现上滑加载更多的功能，请大家继续关注脚本之家给大家带来的精彩内容。

您可能感兴趣的文章:

Three.js实现绘制字体模型示例代码
最近在学习three.js，这篇文章属于系列文章，下面这篇文章主要给大家介绍了关于Three.js如何绘制字体模型的相关资料，通过文中介绍的方法实现的效果非常的赞，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
关于JavaScript的内存与性能问题解决汇总
这篇文章主要介绍了关于JavaScript的内存与性能问题解决汇总，在JavaScript中，页面中事件处理程序的数量与页面整体性能直接相关，原因有很多，下面就一起来看看具体的总结吧
2022-04-04
js表达式计算器代码
js表达式计算器代码，需要的朋友可以参考下。
2011-10-10
添加JavaScript重载函数的辅助方法2
话说，人就是要被关注才有动力啊于是修改了下上次写的《添加JavaScript重载函数的辅助方法》在添加方法的时候增加了一个参数用于限制参数的类型。
2010-07-07
微信小程序实现日历效果
这篇文章主要为大家详细介绍了微信小程序实现日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
几行js代码实现自适应
本文主要介绍了使用js获取隐藏元素宽高的解决方案以及代码思路，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript 实现鼠标拖动元素实例代码
这篇文章主要介绍了JavaScript 实现鼠标拖动元素实例代码,需要的朋友可以参考下
2014-02-02
JS实现闭包中的沙箱模式示例
这篇文章主要介绍了JS实现闭包中的沙箱模式,结合实例形式分析了闭包模块化实现沙箱模式的原理、步骤与相关操作技巧,需要的朋友可以参考下
2017-09-09
DWR实现模拟Google搜索效果实现原理及代码
本文主要介绍DWR实现模拟Google搜索效果实现原理，感兴趣的朋友可以了解下，或许对你的DWR学习有帮助，闲话就不多说了，看代码了
2013-01-01
使用cropper.js裁剪头像的实例代码
最近小编在做一个裁剪头像的功能，下面小编把使用cropper.js裁剪头像的实例代码分享到脚本之家平台，需要朋友参考下吧
2017-09-09