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 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
vue 自动化路由实现代码
Sep 03 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
简单了解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
索尼ICF-SW100收音机评测
2021/03/02 无线电
php 发送带附件邮件示例
2014/01/23 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python 有效的括号的实现代码示例
2019/11/11 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
2014年端午节活动方案
2014/03/11 职场文书
班组拓展活动方案
2014/08/14 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
罚站检讨书
2015/01/29 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技