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');
相关推荐
绿豆饼 2020-07-28
半纸药笺 2020-07-26
半纸药笺 2020-06-14
芯果科技蔡彦 2020-04-30
芯果科技蔡彦 2020-04-14
kfq00 2020-04-10
samllcat 2020-03-27
ZillahV0 2016-08-27
半纸药笺 2019-11-18
qixiang0 2015-04-24
shichong 2015-05-14
庆华 2015-12-26
琪凡睿 2016-04-28
GoDotDotDot 2018-12-12
WarmPure 2018-10-02
青 2017-09-19
GoDotDotDot 2017-07-21
samllcat 2019-07-01