ionic 上拉加载问题(分页)
2015-11-16 16:36
274 查看
问题描述:
1、第一初始化时执行了上拉加载更多。
2、上拉时存在执行多次加载动作。
angularjs的ajax不提供同步机制,是为了防止页面长时间等待,很多时候我们又需要这种同步机制交换状态,比如上拉加载更多,很多时候不允许同时执行多次加载更多,所以有了这篇文章。
首先上代码
doRefresh为下拉刷新方法,loadMore为上拉加载方法,chushihua为服务器请求方法。
1、第一初始化时执行了上拉加载更多。
2、上拉时存在执行多次加载动作。
angularjs的ajax不提供同步机制,是为了防止页面长时间等待,很多时候我们又需要这种同步机制交换状态,比如上拉加载更多,很多时候不允许同时执行多次加载更多,所以有了这篇文章。
首先上代码
.controller('project', function($scope, $stateParams, $http,$state,$ionicPopup) { $scope.hasmore=true; var run = false;//模拟线程锁机制 防止多次请求 含义:是否正在请求。请注意,此处并非加入到了就绪队列,而是直接跳过不执行 console.log($scope.hasmore+"是否加载更多"); var obj = {current:1,count:10}; var result = chushihua(obj,1); $scope.doRefresh = function(){ var obj_data = {current:1,count:10}; var result = chushihua(obj_data,2); $scope.hasmore=true; $scope.$broadcast('scroll.refreshComplete'); }; $scope.loadMore = function(){ var old = $scope.project; if(old!=undefined){ var result = chushihua(obj,3); } $scope.$broadcast('scroll.infiniteScrollComplete'); }; /* state:1初始化,2刷新,3加载更多 */ function chushihua(obj_data,state){ if(!run){ run = true; $http({ method:"POST", url:'此处是服务器地址', data:obj_data, headers: {'Content-Type': 'application/json;charset=utf-8'}, dataType:'JSON' }).success(function(data, status) { run = false; if (state==3) { $scope.project = $scope.project.concat(data.result); if (data.result==null||data.result.length==0) { console.log("结束"); $scope.hasmore=false; }else{ obj.current += obj.count; } }else{ $scope.project = data.result; } }).error(function(data, status) { }); } } })
doRefresh为下拉刷新方法,loadMore为上拉加载方法,chushihua为服务器请求方法。
hasmore为 <ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>上拉加载的 ng-if控制变量。 run属性为模拟锁机制,当run为false状态时,允许向服务器发送请求,当为true时表示正在进行请求,会无视该次请求。
state属性:区分状态,1:页面首次初始化加载数据。2:下拉刷新加载数据。3:上拉加载更多。 如有问题探讨请前往http://www.cnblogs.com/dreamowneryong/p/4969264.html发表评论。水平有限,初学者水平,如有问题欢迎指正。
相关文章推荐
- Redis【笔记】Redis need tcl 8.5 or newer
- 第十二周 项目1 图基本算法库
- 第11周 项目1-验证算法(1)层次遍历算法的验证
- Swift学习,常量与变量(二)
- 【第9周 项目2 - 对称矩阵压缩存储的实现与应用(1)】
- MQ、JMS以及ActiveMQ 关系的理解
- 图的遍历1
- 删除Xcode中的废弃的Provisioning Profiles
- eclipse插件
- Android三级缓存
- centos+nginx+uwsgi+virtualenv+flask 多站点环境搭建
- iOS备忘录之iphone屏幕尺寸及像素
- linux服务器(一)之时间与帮助详解
- swift语言之多线程操作和操作队列(下)———坚持51天吃掉大象(写技术文章)
- Servlet程序开发-- Servlet生命周期
- iOS/OS X内存管理(一):基本概念与原理 【转载】
- 第11周项目1-验证算法(2)二叉树构造算法的验证
- 第十二周 项目1——图基本运算
- 2015彭博全球金融影响力排行:我们的习大大排第二!
- 通知公告阅读日志构建说明