這個問題查了很久,終於明白如何在上拉時爲什麼會自動調用多次
在第一次自動調用時,如果加載的數據沒有充滿屏幕,會自動再調用一次,要是還沒充滿屏幕,會無限次請求數據,官方里面也沒說明這個東西,被坑了好長時間。
如果你不想多次跟後臺交互,就定義請求的條目多點。
html:
<ion-content class="ranktitcontent">
<ion-list>
<div class=" row rankcontentbox" ng-repeat="item in items">
<div class="col col-25 txtcenter"><label ng-bind="$index+1">1</label></div>
<div class="col col-25 txtcenter"><label ng-bind="item.Name | limitTo:4">11111/label></div>
<div class="col col-25 txtcenter"><label ng-bind="item.TuiJianNumber">5</label></div>
<div class="col col-25 txtcenter "><label ng-bind="item.BuyPrice | number">100</label></div>
</div>
</ion-list>
<ion-infinite-scroll ng-if="!domore" on-infinite="doRefresh()" distance="10%" ></ion-infinite-scroll>
</ion-content>
js:
$scope.domore = false;
$scope.PageIndex = 0;
$scope.PageSize = 6;
$scope.userId = window.localStorage.getItem('userId');
$scope.items = [];
$scope.doRefresh = function () {
$scope.PageIndex++;
var timer = null;
var param = {
method: "get",
url: "/Agent/GetPerformance",
params: { PageIndex: $scope.PageIndex, PageSize: $scope.PageSize, UserId: $scope.userId }
}
serviceRequest.query(param) // 同步調用,獲得承諾接口
.then(function (data) { // 調用承諾API獲取數據 .resolve
if (data.result) {
if (data.data) {
if (data.data.AgentPerformance.length !== 0) {
for (var i = 0; i < data.data.AgentPerformance.length; i++) {
$scope.items.push(data.data.AgentPerformance[i]);
}
}
if (data.data.AgentPerformance.length === 0) {
$scope.domore = true;
}
timer = $timeout(function () {
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1500);
} else {
$scope.domore = true;
$scope.$broadcast('scroll.infiniteScrollComplete');
}
}
$scope.$broadcast('scroll.infiniteScrollComplete');
}, function (data) { // 處理錯誤 .reject
$timeout.cancel(timer);
});
$scope.$on("$destroy", function () {
//clearTimeout(timer.$$timeoutId);
$timeout.cancel(timer);
//清除配置,不然scroll會重複請求
});