问题描述:
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发表评论。水平有限,初学者水平,如有问题欢迎指正。
时间: 2024-11-07 05:54:35