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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JS中substring与substr的用法
Nov 16 Javascript
简单实现node.js图片上传
Dec 18 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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
终于听上了直流胆调频
2021/03/02 无线电
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
js表头排序实现方法
2015/01/16 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Django视图扩展类知识点详解
2019/10/25 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
机关门卫岗位职责
2013/12/30 职场文书
好的演讲稿开场白
2013/12/30 职场文书
青年文明号复核材料
2014/02/11 职场文书
市场营销毕业求职信
2014/08/07 职场文书
消防志愿者活动方案
2014/08/23 职场文书
房地产端午节活动方案
2014/08/24 职场文书
碧霞祠导游词
2015/02/09 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android