ionic（23）
刷新完毕后，应当使用作用域的 $broadcast() 方法通知框架：
$scope.$broadcast(&scoll.refreshComplete&)
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8626次
排名：千里之外
原创：86篇
转载：15篇
(5)(4)(33)(14)(18)(28)头部 ion-header-bar - Ionic javascript 中文参考文档教程(ionic-china中文网)
Ionic javascript 指令、服务及配置
该文档解释了ionic的derictive指令以及项目在各个平台的配置、初始样式等等。
ion-header-bar
这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它将变成副标题。参考。
如果需要隐藏原标题请在(ionic-china中文网文档)指令中添加hide-nav-bar="true"属性。
实例该文档来自ionic中文网
&ion-header-bar align-title=&left& class=&bar-positive&&
&div class=&buttons&&
&button class=&button& ng-click=&doSomething()&&Left Button&/button&
&h1 class=&title&&Title!&/h1&
&div class=&buttons&&
&button class=&button&&Right Button&/button&
&/ion-header-bar&
&ion-content&
Some content!
&/ion-content&
align-title
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll
默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
1.将tab1.html的代码改为如下：
&ion-content&
&ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"&&/ion-refresher&
&ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)"&
&ion-slide ng-repeat="slide in slides"&
&div class="list has-header"&
&a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#"&
&img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt=""&
&h3&{{item.title}}&/h3&
&p&{{item.description | substring:item.description}}&/p&
&ion-infinite-scroll ng-if="!hasmore" on-infinite="loadMore()" distance="1%"&
&/ion-infinite-scroll&
&/ion-slide&
&/ion-slide-box&
&/ion-content&
2.controller.js层Tab1Ctrl的实现
.controller('Tab1Ctrl', function ($scope, Tab1Service,
$ionicSlideBoxDelegate, $ionicTabsDelegate) {
var page = 1,isLock=false;
$scope.items = [];
$scope.loadMore = function () {
if(isLock)return;
isLock=true;
Tab1Service.getList(classify[0].url, page).success(function (response) {
console.log(page)
if (response.tngou.length == 0) {
$scope.hasmore = true;
$scope.items = $scope.items.concat(response.tngou);
}).finally(function (error) {
isLock = false;
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.refreshComplete');
$scope.doRefresh = function () {
$scope.items = [];
$scope.loadMore();
3.代码解释
上面菜单部分使用了Tab组建，中间的列表部分使用SlideBox，并不存在任何嵌套，只是在各自选择的时候做一些处理。
ion-refresher标签：下拉刷新的效果，下拉时触发doRefresh。
ion-infinite-scroll标签：上拉加载的效果 。
islock：锁，防止在网络慢的时候多次请求。
hasmore：在最后一页的时候禁止触发加载更多。
阅读排行榜当前位置：
Ionic如何实现下拉刷新与上拉加载功能
Ionic如何实现下拉刷新与上拉加载功能
15:46:43 | 5 次阅读 | 评论: 0 | 来源: 网友投递
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
本文给大家介绍 Ioinc中怎么实现 下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能，感兴趣的朋友一起看看吧。
&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"&
{{message.static?message.content:message.content.substr(, )}}
&!-- 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&
o　　on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast(‘scroll.refreshComplete‘);
o　　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 =
show: function (message) {
if (message.static) {
message.static =
message.static =
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 =
$scope.$broadcast(‘scroll.infiniteScrollComplete‘);
vm.init();
此处的messages 是view显示的数据，pagination是做分页加载显示的参数，service是我封装的$http服务，show方法是view信息显示的开关（这些都可以不用注意）！
关于小编给大家介绍的Ionic如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注phperz网站！
与本文相关文章ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
时间： 20:16:08
&&&& 阅读：74
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&发了十篇教程，现在向我问问题的朋友越来越少了。可能我接触到的学习ionic的就这么些人吧！
可能大家已经觉得我写的东西都太过基础了，没什么值得参考借鉴的地方。
开始有人叫我说直接防类似饿了吗，折八百这样的网站，做一个Demo。
其实我也知道有些朋友就想要这种网上的免费劳动力。
但是其实这个建议还是不错的。
等我把现在这个demo讲完，我可能会考虑找一个成熟的上线的项目进行说明。
这个列表页一说，写完这个的朋友就可以尝试着接手项目了。
我不是说ionic简单，内容少。
我只是说我这些时间里面提到的内容已经足够入门了。
后续的学习还是要从项目中开始会比较科学。
其实我讲的都有些多了，关于基础中的基础，无非就是MVC，服务控制器视图之间如何交互，如何双向绑定，如何使用ionic标签，如何遍历数组。
言归正传，开始我们今天的课程吧。
首先我们看一下这节课要实现的功能：
我们要做的是上图中这样的列表页，首先简单分析我们就能知道，列表页里面的子项都是一样的样式，只不过数据有差别而已。
所以我们这里只要编写一个子项的样式，然后通过使用ng-repeat进行循环遍历数据数组，就等得到我们想要的列表页。
通过分析这个子项，我们能够知道这东西大致由三个部分组成，
左边的图片，中间的文本说明区域，右边的按钮。
查阅ionic的itemAPI，我们找到这样一个样式
图片来自：//2014_ionic_api_css/&
还是我上次讲的原则，能用ionic的样式就先用ionic的样式，能少敲一行代码，就少敲一行。
从服务器获取数据这个就不说了，前面说了很多了。
基本上没敲什么代码，就完成了大半了，现在再加入一个按钮
这样基本所有的功能就都有了，然后根据效果图，对css做部分的微调。
这个相当于是for(var key in items){这里是a标签包含的所有html，都会被复制&}
恩，界面跟我们要的不一样，所以手动修改吧，这里贴代码了，直接看Demo吧。
接下来，我们来看比较常见的，列表页附加需求，上拉加载、下拉刷新。
这两个功能现在都是默认必须有的，产品经理在写需求时都懒得写到需求文档里面的。
只要提到列表页，一定要有这两个功能。恩，有些固定内容的列表页并不需要，当我胡扯的。
先说上拉加载：这个是放在&/ion-content&之前的，也就是界面的最下面
&ion-infinite-scroll on-infinite=&loadMore()& distance=&1%& ng-if=&!noMore&&
&/ion-infinite-scroll&
ng-if是指这个控件的显示或隐藏。
这里要注意和ng-show的区别，ng-show和ng-hide是使用css的方法显示和隐藏控件，实际是还存在的。ng-if则是移除和添加。这个是有本质上的区别的在实际情况下，要根据业务的需要进行选择，如果需要重复高频的显示隐藏可以考虑使用ng-show，如果隐藏之后不再需要显示则最好使用ng-if
distance是指当滑块（就是滚动条的那个滑块，不显示还是存在的）距离底部多少的时候触发事件。
on-infinite是指绑定的触发事件。
值得注意的是，这个事件要在处理完响应之后，抛出scroll.infiniteScrollComplete事件
这里扩展说明一下;
$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data
详细的可以参考:/articles/qIBNve 我这里不在重复了。
下拉刷新用的是
&ion-refresher pulling-text=&下拉刷新...& on-refresh=&doRefresh()&&
&/ion-refresher&注意这个是放在&ion-content &之后的，也就是界面的最上面。注意和上拉加载的区别
注意这里在事件响应结束的时候，要抛出scroll.refreshComplete事件，和上拉加载的事件是不一样的。
到此这节课的内容就结束了。
项目Demo地址：如果你还有什么其他的问题,可以通过以下方式找到我QQ:E-mail:新浪微博:小虎Oni公众号:ionic__
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://blog.csdn.net/onil_chen/article/details/
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！