Ionic如何实现下拉刷新与上拉加载功能


Posted in Javascript onJune 03, 2016

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。

本文给大家介绍 Ioinc中怎么实现 下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能,感兴趣的朋友一起看看吧。

HTML部分

<ion-view view-title="消息通知">
<ion-content class="padding">
 <!-- <ion-refresher> 下拉刷新指令 -->
<ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
<div class="list card" ng-repeat="message in vm.messages" >
<div class="item item-divider item-icon-right">{{message.title}}
<i class="icon" ng-click="vm.show(message)" ng-class="message.static?‘ion-arrow-down-b‘:‘ion-arrow-right-b‘"></i></div>
<div class="item item-body">
<div>
{{message.static?message.content:message.content.substr(, )}}
</div>
</div>
</div>
<!-- ion-infinite-scroll 上拉加载数据指令 distance默认% nf-if的值为false时,就禁止执行on-infinite -->
<ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="%" ></ion-infinite-scroll>
</ion-content>
</ion-view>

JS部分

on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast(‘scroll.refreshComplete‘);

on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast(‘scroll.infiniteScrollComplete‘);

angular.module(‘starter.controllers‘, [])
.controller(‘InfoCtrl‘, function($rootScope, $timeout, $interval, $scope, $http, services) {
var vm = $scope.vm = {
moredata: false,
messages: [],
pagination: {
perPage: ,
currentPage: 
},
init: function () {
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = data;
})
},
show: function (message) {
if (message.static) {
message.static = false;
} else {
message.static = true;
}
},
doRefresh: function () {
$timeout(function () {
$scope.$broadcast(‘scroll.refreshComplete‘);
}, );
},
loadMore: function () {
vm.pagination.currentPage += ;
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = vm.messages.concat(data);
if (data.length == ) {
vm.moredata = true;
};
$scope.$broadcast(‘scroll.infiniteScrollComplete‘);
})
} 
}
vm.init();
})

此处的messages 是view显示的数据,pagination是做分页加载显示的参数,service是我封装的$http服务,show方法是view信息显示的开关(这些都可以不用注意)!

关于小编给大家介绍的Ionic如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
基于jquery实现五星好评
Nov 18 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
javascript中如何判断类型汇总
May 14 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 #Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 #Javascript
深入理解JavaScript内置函数
Jun 03 #Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 #Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 #Javascript
浅谈JavaScript 浏览器对象
Jun 03 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php array_intersect()函数使用代码
2009/01/14 PHP
php使用google地图应用实例
2014/12/31 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
使用python实现rsa算法代码
2016/02/17 Python
用Python设计一个经典小游戏
2017/05/15 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python字符串的index和find的区别详解
2020/06/20 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
品酒会策划方案
2014/05/26 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android