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 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 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实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
Web程序工作原理详解
2014/12/25 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python实现kNN算法
2017/12/20 Python
详解python之协程gevent模块
2018/06/14 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
汽车队司机先进事迹材料
2014/02/01 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
入党群众意见范文
2015/06/02 职场文书
期中考试后的感想
2015/08/07 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技