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__){
			//请求的URL
			var 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__){
			//请求的URL
			var 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');
				}
			});
			
		},
		//获取会员推荐的会员list
		getMemberOfMemberList : function(__scope__,myuid){
			//请求的URL
			var 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){
			//请求的URL
			var 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');