这个问题查了很久,终于明白如何在上拉时为什么会自动调用多次
在第一次自动调用时,如果加载的数据没有充满屏幕,会自动再调用一次,要是还没充满屏幕,会无限次请求数据,官方里面也没说明这个东西,被坑了好长时间。
如果你不想多次跟后台交互,就定义请求的条目多点。
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会重复请求
});