ionic 上拉刷新 ion-infinite-scroll 自動調用多次問題解決

這個問題查了很久,終於明白如何在上拉時爲什麼會自動調用多次

在第一次自動調用時,如果加載的數據沒有充滿屏幕,會自動再調用一次,要是還沒充滿屏幕,會無限次請求數據,官方里面也沒說明這個東西,被坑了好長時間。

如果你不想多次跟後臺交互,就定義請求的條目多點。

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會重複請求
            });


發佈了34 篇原創文章 · 獲贊 1 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章