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.****.net/jslcylcy/article/details/76633635
https://www.cnblogs.com/dreamowneryong/p/4969264.html

ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决
　　加入定时器timer：https://blog.****.net/chenhua4088/article/details/49929279

ionic 的下拉刷新 与 上拉加载：https://www.cnblogs.com/ailen226/p/4626166.html

列表展示页面，分页数据进行追加：http://hbiao68.iteye.com/blog/2295161