ionic 下拉分页 ion-infinite-scroll标签

 ionic html标签代码，其中使用ion-infinite-scroll实现下拉分页

<ion-header-bar class="">  <a class="button button-clear" ui-sref="index">    <span class="icon ion-ios-arrow-left">    </span>  </a>  <h1 class="title">    推荐会员总数{{total}}  </h1></ion-header-bar><style>  .popup-container.popup{width:95%;border-radius:5px}</style><ion-content><!--注意ion-infinite-scroll标签的开始和结束位置当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。设置ion-infinite-scroll控件的高度为1个像素，不然不显示，控件显示不出来-->  <ion-infinite-scroll on-infinite="doRefresh()" distance="5%" style="height: 1px;"  ng-if="hasData()">  </ion-infinite-scroll>  <ul class="list">    <li class="item bg_ff">      <span>        直接会员:      </span>      <span>        {{level1}}      </span>    </li>    <li class="item item-avatar" ng-repeat="item in lists">      <img src="{{item.img}}" class="img_responsive width_40px float_left" ng-click="userInfo({{item.uid}})">      <p class=" line_height_35px" style="font-size: 18px;">        <span class="float_left">          {{item.username}}        </span>        <span class="float_right" ng-click="showMyMemberList({{item.uid}})">          <span class="margin_right_10">            {{item.num}}          </span>          <span class="icon ion-ios-arrow-right font_20 color_99 ">          </span>        </span>        <span class="clear_both">        </span>      </p>    </li>  </ul></ion-content>

 注意：

1、ion-infinite-scroll标签的位置——在容器的顶部，并且不包含任何内容

2、为了不显示加载内容，设置style="height:1px;"

3、当滚动条到底部，并且服务器没有数据的时候，使用ng-if指令来控制便签是否存在，即，是否继续向服务器发送请求（如果没有这个功能，会不停的向服务器发送请求）

 

注意：由于有ng-if="hasData()"来控制是否需要继续加载，在控制器中一定要添加这个方法，否则默认是不显示的。

 

控制器

//查看我的会员.state('myMemberList', {url: '/myMemberList',templateURL:'abc.html',onEnter :function(){//因此底部的导航栏$(".index_footer").hide();},onExit : function(){},controller:["$scope","$state","$ionicPopup",'myMemberListService',function($scope,$state,$ionicPopup,myMemberListService){//获取我的直属会员的数量myMemberListService.getMyUsersNum($scope);//第一进来访问页面标记$scope.pageNumber = 0;$scope.lists = [];//第一次是有数据的$scope.isHaveData = true;$scope.doRefresh = function(){$scope.pageNumber = $scope.pageNumber + 1;//获取我的直属会员的list列表myMemberListService.getMyUsersList($scope);};//获取用户的详细信息$scope.userInfo = function(myuid){myMemberListService.getMyUserInfo(myuid);};//查看二级会员列表$scope.showMyMemberList = function(myuid){window.location.href = '#/myMemberOfMember/'+myuid;};//是否是底部$scope.hasData = function(){return $scope.isHaveData;}}]})

注意：

1、第一次进来就会执行“doRefresh”方法

2、初始化$scope.pageNumber=0，每次进入doRefresh方法就加一

  

server服务 

//查看我的会员.factory("myMemberListService",["$http","$ionicPopup",function($http,$ionicPopup){return {//获取我的直属会员账号数量  和 第二级会员账号和getMyUsersNum : function(__scope__){//请求的URLvar myurl = "{:U('MemberInfo/myTotalMembers')}";var promise = $http.get(myurl);promise.success(function(response, status, headers, config){if(response.error == 0){__scope__.total = response.total;__scope__.level1 = response.level1;}});},//获取直属会员的list数量getMyUsersList : function(__scope__){//请求的URLvar myurl = "{:U('MemberInfo/myLevel1Members')}";//发送分页请求var configObj = {params: {"page":__scope__.pageNumber}};var promise = $http.get(myurl,configObj);promise.success(function(response, status, headers, config){if(response.error == 0){var lists = __scope__.lists;//如果获取到的数据不为空if(response.data != null && response.data !="" && response.data !=undefined){//获取数据，在原来的数据基础上追加信息if(lists.length > 0 ){__scope__.lists = new Array().concat(lists, response.data);}else{__scope__.lists = response.data;}//如果查询的数据不到20，表示已经没有数据了if(response.data.length <20){__scope__.isHaveData = false;}}else{//如果数据为空__scope__.isHaveData = false;}__scope__.$broadcast('scroll.infiniteScrollComplete');}});},//获取会员推荐的会员listgetMemberOfMemberList : function(__scope__,myuid){//请求的URLvar myurl = "{:U('MemberInfo/myLevel2Members')}";//发送分页请求var configObj = {params: {"page":1,"uid":myuid}};var promise = $http.get(myurl,configObj);promise.success(function(response, status, headers, config){if(response.error == 0){var lists = __scope__.lists;//如果获取到的数据不为空if(response.data != null && response.data !="" && response.data !=undefined){//获取数据，在原来的数据基础上追加信息if(lists.length > 0 ){__scope__.lists = new Array().concat(lists, response.data);}else{__scope__.lists = response.data;}__scope__.countMember = response.num;//如果查询的数据不到20，表示已经没有数据了if(response.data.length <20){__scope__.isHaveData = false;}}else{//如果数据为空__scope__.isHaveData = false;}__scope__.$broadcast('scroll.infiniteScrollComplete');}});},//查看用户信息getMyUserInfo : function(uid){//请求的URLvar myurl = "{:U('MemberInfo/myMemberDetail')}";//发送分页请求var configObj = {params: {"uid":uid}};var promise = $http.get(myurl,configObj);promise.success(function(response, status, headers, config){if(response.error == 0){var uesrInfo = response.data;var alertPopup = $ionicPopup.alert({title: '个人名片',template: '<ul class="list"><li class="item item-avatar"style="padding-top: 10px;padding-bottom: 10px;"><img src="'+uesrInfo.img+'"class="img_responsive width_40px float_left"><p class=" line_height_35px"style="font-size: 18px;"><div class="float_left line_height_40px"style="font-size: 12px;width: 90px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">'+uesrInfo.name+'</div><div class="float_right font_12"ng-click="showMyMemberList()"><div class="color_ca0500 text-center">'+uesrInfo.contribution+'</div><div class="color_99">贡献金额</div></div><span class="clear_both"></span></p></li><li class="item bg_ff"><span>联系电话:</span><span>'+uesrInfo.mobile+'</span></li><li class="item bg_ff"><span>收货地址:</span><span>'+uesrInfo.address+'</span></li></ul>'});alertPopup.then(function() {});}});}}}])

 

注意：

1、我这里规定的是一页显示20条数据（与后台约定的），当查询的数据小于20条表示已经到底部了

2、如果要触发下拉方法on-infinite事件，必须使用$scope.$broadcast('scroll.infiniteScrollComplete');