ionic（1）
&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(0, 40)}}
&!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时，就禁止执行on-infinite
&ion-infinite-scroll ng-if=&!vm.moredata& on-infinite=&vm.loadMore()& distance=&1%& &&/ion-infinite-scroll&
&/ion-content&
&/ion-view&
　1.　on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束&$scope.$broadcast(‘scroll.refreshComplete‘);
　2.　on-infinite 上拉触发的函数 同样需要广播事件结束&$scope.$broadcast(‘scroll.infiniteScrollComplete‘);
&pre name=&code& class=&javascript&&angular.module('starter.controllers', [])
.controller('InfoCtrl', function($rootScope, $timeout, $interval, $scope, $http, services) {
var vm = $scope.vm = {
moredata: false,
messages: [],
pagination: {
perPage: 5,
currentPage: 1
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 += 1;
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = vm.messages.concat(data);
if (data.length == 0) {
vm.moredata =
$scope.$broadcast(‘scroll.infiniteScrollComplete‘);
vm.init();
　　此处的messages 是view显示的数据，pagination是做分页加载显示的参数，service是我封装的$http服务，show方法是view信息显示的开关（这些都可以不用注意）！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3388次
排名：千里之外
原创：10篇
评论：11条
本博客的文章，未经博主允许不得转载。
若需转载，请联系博主，
或在文章后留下作者邮箱与姓名，方便出现问题进行改正与商讨，相互改进。
博主邮箱：
博主称呼：谢龙猫Ionic如何实现下拉刷新与上拉加载功能
作者：小月博客
字体：[ ] 类型：转载 时间：
在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍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&
•　　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 =
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如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注脚本之家网站！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&&&&ionic 上拉加载和下拉刷新demo
&ionic 上拉加载和下拉刷新demo
ionic 上拉加载和下拉刷新demo
若举报审核通过，可奖励20下载分
被举报人：
qinguicheng
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
移动开发下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
ionic 上拉加载和下拉刷新demo
所需积分：1
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
ionic 上拉加载和下拉刷新demo
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员查看: 4568|回复: 2
ion-infinite-scroll 上拉加载更多为什么方法会重复执行
主题帖子积分
新手上路, 积分 9, 距离下一级还需 41 积分
新手上路, 积分 9, 距离下一级还需 41 积分
有没有高手告诉我
我html里有个上拉刷新的标签
&ion-infinite-scroll ng-if=&true&&&on-infinite=&loadMore()& distance=&1%& &&/ion-infinite-scroll&
$scope.loadMore=function(){
& & & & & & & & alert(&loadMore&)
& & & & & & & & //$scope.havaMore=
& & & & & & & & queryList();
& & & & & & & & $scope.$broadcast('scroll.infiniteScrollComplete');
& & & & };
我上拉的时候会不停的执行loadMore方法，如果去掉$scope.$broadcast('scroll.infiniteScrollComplete');上拉的时候只执行一次，但是那个刷新的图标会一直在
主题帖子积分
新手上路, 积分 38, 距离下一级还需 12 积分
新手上路, 积分 38, 距离下一级还需 12 积分
把distance设置成“-1%”试试。
主题帖子积分
每一页数据放多一些，还有就是等数据请求完成以后再执行$scope.$broadcast('scroll.infiniteScrollComplete')
因为异步加载你数据还没有请求完成 就执行$scope.$broadcast('scroll.infiniteScrollComplete')，这样的话他会又触发请求
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered by