問題描述:
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發表評論。水平有限,初學者水平,如有問題歡迎指正。