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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 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实现智能文件类型检测的实现代码
2011/08/02 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python实现360的字符显示界面
2014/02/21 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python保存文件方法小结
2018/07/27 Python
Python 中的lambda函数介绍
2018/10/10 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
信息管理专业自荐书
2014/06/05 职场文书
2014年班务工作总结
2014/12/02 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
家长会开场白和结束语
2015/05/29 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS