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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 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
php实现天干地支计算器示例
2014/03/14 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JS快速实现移动端拼图游戏
2016/09/05 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
详解Python的单元测试
2015/04/28 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python和c语言的主要区别总结
2019/07/07 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
类和结构的区别
2012/08/15 面试题
劳资协议书范本
2014/04/23 职场文书
新郎结婚保证书
2015/02/26 职场文书
教师远程培训心得体会
2016/01/09 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Navicat连接MySQL错误描述分析
2021/06/02 MySQL