AngularJS上拉加載問題解決方法

2019-11-20 09:57:30

字體：大中小

來源：轉載

供稿：網友

項目中始終存在一個問題:當在搜索欄輸入關鍵詞后(見圖1)，按照既定的業務邏輯應該是服務端接收到請求后，首先返回查詢的前7條數據，待客戶端出現上拉加載時，繼續查找另外7條數據。但實際情形是不確定的，在服務端控制臺(見圖2)可看到begno一直到了126，也就是相當于客戶端往服務端請求了127次，這是一個令人無法忍受的結果。

圖1 客戶端搜索欄

圖2 服務端控制臺

可以斷定是客戶端的業務邏輯出現了問題。返回到客戶端，查看源碼邏輯，修改如下:

控制器

$scope.medsearchMore = function() { console.log("上拉加載....." + isfinished); if (isfinished == 0) { begno += pcnt; var data = { "begno" : begno, // 起始序號 "pagenum" : pagenum, // 每頁返回條數 "searchby": searchby }; if (searchType == 1) { data.classid = searchKey; console.log(data.classid); //--------1 appCallServer($http, "9002", data, function(data) { console.log("下拉刷新查詢結果rootScope.med:" + JSON.stringify(data.data)); for (var i = 0; i < data.pcnt; i++) { $rootScope.med.push(data.data[i]); } // 更新狀態 isfinished = data.isfinished; // 藥品已查詢完畢 if(isfinished == '1'){ $scope.noMore = true; }else{ $scope.noMore = false; } pcnt = data.pcnt; }, function(data) { // 藥品已查詢完畢 $scope.noMore = true; $ionicLoading.show({ template: data.errtext }); $timeout(function() { $ionicLoading.hide(); }, 1200); }); } } else { // 藥品已查詢完畢 $scope.noMore = true; } $timeout(function() { $scope.$broadcast('scroll.infiniteScrollComplete'); }, 1200); };

視圖

<!--當用戶到達頁腳或頁腳附近時，ion-infinite-scroll指令允許你調用一個函數 。當用戶滾動的距離超出底部的內容時，就會觸發你指定的on-infinite--> <!--當沒有更多數據加載時，就可以用一個簡單的方法阻止無限滾動，那就是angular的ng-if指令--> <!--設置noMore初始值為true首次即點擊分類查詢時不進行下拉加載操作--> <ion-infinite-scroll on-infinite="medsearchMore()" distance="0.01%" icon="ion-loading-c"></ion-infinite-scroll> <div class="item" ng-if="noMore" align="center"><p>沒有更多的藥品了</p></div>

經過以上修改，可以實現避免不必要的請求。