angularjs+ionic的app端分頁和條件

做app專案積分商城的商品列表需要分頁顯示

實現：

　　ionic滾動條：ion-scroll 用於建立一個可滾動的容器。

　　附：菜鳥教程：http://www.runoob.com/ionic/ionic-scroll.html

　　　　隸屬於ionContent 或 ionScroll，要寫在ion-content才有效

ion-infinite-scroll

當使用者到達頁尾或頁尾附近時，ionInfiniteScroll指令允許你呼叫一個函式 。

當使用者滾動的距離超出底部的內容時，就會觸發你指定的on-infinite。

ion-refresher

允許你新增下拉重新整理滾動檢視。

<!-- <ion-refresher> 下拉重新整理指令  -->
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"></ion-refresher>

<!-- ion-infinite-scroll 上拉載入資料指令 distance預設1% nf-if的值為false時，就禁止執行on-infinite  -->
<ion-infinite-scroll ng-if="moredata" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll>

　　1.　on-refresh 下拉觸發的函式 函式執行結束之前必須廣播下該事件結束 $scope.$broadcast(`scroll.refreshComplete`);

　    2.　on-infinite 上拉觸發的函式 同樣需要廣播事件結束 $scope.$broadcast(`scroll.infiniteScrollComplete`);

js程式碼：

    //載入更多
//        $scope.items = [];
        //無限載入
        $scope.moredata = true;
        
        var sName = "``";//初始化搜尋條件，預設
        var currentPage = 0;//初始化頁碼
        var intData = [];//初始化陣列
        
        //搜尋事件
        $scope.search = function() {
            if($scope.searchName != undefined && $scope.searchName != "" && $scope.searchName != null) {
                sName = $scope.searchName;
                currentPage = 0;
//                intData = [];
                intData.splice(0,intData.length);//清空陣列
                $scope.loadMore();
            }
        }
        
        //下拉重新整理
        $scope.doRefresh = function() {
            currentPage = 1;
            intData = [];
            $scope.moredata = true;
//            $scope.loadMore();
            HttpRequest.query("jdApi/commodity/getCommodityList/" + currentPage + "/" + sName + "/``", true)
            .success(function(objs) {
                var result = angular.fromJson(objs.jdBaseMsgBean.result);
                
                //獲取資料，在原來的資料基礎上追加資訊
                var lists = intData;
                 if(lists.length > 0 ){  
                        intData = new Array().concat(lists, result.data);  
                    }else{  
                        intData = result.data;
                    }  
                $scope.gifts = intData;
                
                if(result.totalRecord <= currentPage*result.pageSize) {
                    $scope.moredata = false;
                }
                //自動請求後臺多次問題解決
                $timeout(function () {
                    $scope.$broadcast(`scroll.refreshComplete`);
                  }, 1000);
            });
            
        }
        
        //上拉載入
        $scope.loadMore = function() {
//            $http.get(`/more-items`).success(function(items) {
//              useItems(items);
//              $scope.$broadcast(`scroll.infiniteScrollComplete`);
//            });
            currentPage += 1;
            HttpRequest.query("jdApi/commodity/getCommodityList/" + currentPage + "/" + sName + "/``", true)
            .success(function(objs) {
                var result = angular.fromJson(objs.jdBaseMsgBean.result);
                
                //獲取資料，在原來的資料基礎上追加資訊
                var lists = intData;
                 if(lists.length > 0 ){  
                        intData = new Array().concat(lists, result.data);  
                    }else{  
                        intData = result.data;
                    }  
                $scope.gifts = intData;
                
                if(result.totalRecord <= currentPage*result.pageSize) {
                    $scope.moredata = false;
                }
//                if(result.totalPage == currentPage) {
//                    $scope.moredata = false;
//                }
//                if(result.data.length < result.pageSize){
//                    $scope.moredata = false;
//                }
                
//                $scope.$broadcast(`scroll.infiniteScrollComplete`);
                //自動請求後臺多次問題解決--ionic 上拉重新整理 ion-infinite-scroll 自動呼叫多次問題解決
                timer = $timeout(function () {  
                            $scope.$broadcast(`scroll.infiniteScrollComplete`);  
                        }, 1000); 
            });
        }
    
        $scope.$on(`$stateChangeSuccess`, function() {
            $scope.loadMore();
        });
        
        $scope.$on("$destroy", function () {  
            //清除配置,不然scroll會重複請求   
            $timeout.cancel(timer);  
        });  

 說明：

　　1.moredata，頁面用ng-if=”moredata”，來判斷是否載入資料。當滾動條到底部，並且伺服器沒有資料的時候，使用ng-if指令來控制便籤是否存在，即，是否繼續向伺服器傳送請求（如果沒有這個功能，會不停的向伺服器傳送請求）。

　　2.$scope.$on上的$stateChangeSuccess和$destroy

　　　　　　如果在下拉標籤中使用immediate-check=”false”屬性的話

<ion-infinite-scroll immediate-check="false" ng-if="moredata" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

　　　　　　$stateChangeSuccess配置是資料載入：是否在頁面載入後立刻觸發on-infinite的方法，設為false後，則只有滾動到頁面邊緣時才會觸發，即使頁面載入出來已經到最底部，不滾動一下的話也是不會觸發的。

　　3.HttpRequest.query(“jdApi/commodity/getCommodityList/” + currentPage + “/” + sName + “/“”, true)是service層封裝的$http服務，如下

query: function(url, isLoad){
            if(isLoad){
                Prompt.showLoading();
            }
            var params = {"rd": angular.randomCode()};
            var http = $http({
                method: `QUERY`,
                params: params,
                url: $rootScope.url.app + `services/` + url,
                timeout:90000
            });
            http.error(function(data, status, headers, config){
                showError(status);
            });
            http.finally(function(){
                if(isLoad){
                    Prompt.hideLoading();
                }
            });
            return http;
        }

html程式碼：

<ion-content class="divider-bg box-content" style="">
    <ion-refresher pulling-text="下拉重新整理" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
        <ion-item class="item-thumbnail-left item-thumbnail-left-custom item-icon-right" ng-repeat="g in gifts" href="#/tab/my/jifen/gift/{{totalScore}}/{{g.id}}">
            <img class="img-48 media-object pull-left" ng-src="http://img13.360buyimg.com/n4/{{g.imagePath}}" alt="{{g.name}}">
            <h2>{{g.name}}</h2>
            <div class="shop-pro-list">
                <span class="shop-pro-list-scores"><span class="color-org">{{g.price}}</span>{{`jifen.jifen` | i18next}}</span>
                <span><i class="exchange-btn">{{`jifen.exchangeNow` | i18next}}</i></span>
            </div>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="moredata" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>

搜尋的程式碼：

<button class="button button-small button-search-jd" on-tap="search()">{{`jifen.search` | i18next}}</button>

解釋：on-tap為ionic事件（手勢輕擊事件）

　　ionic手勢事件：http://www.runoob.com/ionic/ionic-gesture-event.html

　　　　起初使用ng-click，但事件不起作用，通過查詢發現：直接在ion-list中的ion-item中並不能觸發ng-click事件，可以在item中的元素上再套一層div。

　　　　Ionic 常見問題及解決方案：https://www.jianshu.com/p/b567cc657a49

注：分頁參考文件

https://blog.csdn.net/jslcylcy/article/details/76633635
https://www.cnblogs.com/dreamowneryong/p/4969264.html

ionic 上拉重新整理 ion-infinite-scroll 自動呼叫多次問題解決
　　加入定時器timer：https://blog.csdn.net/chenhua4088/article/details/49929279

ionic 的下拉重新整理 與 上拉載入：https://www.cnblogs.com/ailen226/p/4626166.html

列表展示頁面，分頁資料進行追加：http://hbiao68.iteye.com/blog/2295161