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怎么实现上滑加载更多的功能,请大家继续关注脚本之家给大家带来的精彩内容。
相关文章
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用,感兴趣的朋友一起看看吧...2016-06-12
- 在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
- 在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,基于ionic怎么实现呢?下面小编给大家分享ionic中列表项增加和删除的实现方法,一起看看吧...2017-01-26
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
这篇文章主要介绍了Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析的相关资料,需要的朋友可以参考下...2016-01-21- 这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 本文主要介绍了原生js实现网页顶部自动下拉收缩广告效果的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
本文主要给大家介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验,...2016-05-14- 这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单效果的相关资料...2016-05-05
- 这篇文章主要介绍了Ionic2调用本地SQlite实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-27
- 本文主要介绍了微信小程序中实现列表的上拉加载和下拉刷新的方法。具有很好的参考价值。下面跟着小编一起来看下吧...2017-04-03
- 在app中经常会有滚动的跑马灯效果的运用,接下来通过本文给大家介绍使用ionic在首页新闻中应用到的跑马灯效果的实现方法,需要的的朋友参考下...2017-02-19
- 在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页,非常实用,感兴趣的童鞋参考下吧...2016-04-19
- 这篇文章主要为大家详细介绍了ionic实现带字的toggle滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,需要的朋友参考下吧...2016-02-26
- 这篇文章主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要介绍Ionic如何创建APP项目的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下...2016-06-12
- 一般的select下拉框是不能输入的,只能供大家选择,今天小编给大家分享基于jQuery实现select下拉选择可输入附源码下载,需要的朋友参考下...2016-02-05
AngularJS之ionic 框架下实现 Localstorage本地存储
这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-27