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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JQuery学习总结【二】
Dec 01 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
Javascript Promise用法详解
May 10 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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
javascript 学习之旅 (3)
2009/02/05 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
利用python画出折线图
2018/07/26 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Django之模型层多表操作的实现
2019/01/08 Python
python实现AES加密解密
2019/03/28 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
大学生自我鉴定
2013/12/16 职场文书
档案工作汇报材料
2014/08/21 职场文书
法人授权委托书范本
2014/09/17 职场文书
介绍信格式样本
2015/05/05 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android