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


Posted in Javascript onJune 03, 2016

在平常做项目时下拉刷新功能非常常见,那么大家都是怎么实现的呢?下面小编给大家介绍如何使用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怎么实现上滑加载更多的功能,请大家继续关注三水点靠木给大家带来的精彩内容。

Javascript 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
js给selected添加options的方法
May 06 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
js不间断滚动的简单实现
Jun 03 #Javascript
Ionic如何创建APP项目
Jun 03 #Javascript
Ionic快速安装教程
Jun 03 #Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 #Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 #Javascript
You might like
php中mkdir函数用法实例分析
2014/11/15 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
学习python可以干什么
2019/02/26 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python中关于浮点数的冷知识
2019/09/22 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
幼儿教师寄语集锦
2014/04/03 职场文书
心理咨询承诺书
2014/05/20 职场文书
红头文件任命书范本
2014/06/05 职场文书
团日活动总结模板
2014/06/25 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
单位车辆管理制度
2015/08/05 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书