这个页面有二个分页，jq就用了个ajax其他都是用js写的，
原理：页面滚动时如果 页面滚动高度+内容显示区域的高度>列表高度 加载下一页 有分页时列表高度是比前二个和还要大的。页面滚动高度+屏幕高度是因为手机端列表内容是第一页与之后的页面的叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>我的卡</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="tab-warp">
<div class="tab">
<span class="tab-on">
未获取激活码
</span>
<span>
已获取激活码
</span>
</div>
</div>
<!--未获取激活码-->
<div class="card-list" id="notActiveList">
</div>
<!--已获取激活码-->
<div class="card-list" style="display: none;" id="activeList">
</div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<!--未获取激活码-->
<script id="unActLists" type="text/html">
{{each data item}}
<div class="card-content">
<div class="card-box">
<p class="card-num">{{item.number}}</p>
<div class="card-money">
￥<span>{{item.price}}</span>
</div>
</div>
<div class="card-tab">
<a href=give.html?{{item.orderSn}}&{{item.number}}&{{item.price}}>赠送</a>
<a href=obtain.html?{{item.orderSn}}&{{item.number}}&{{item.price}}>获取激活码</a>
<a href=cashOut.html?{{item.orderSn}}&{{item.number}}&{{item.price}}&{{item.recoverDisaccount}}>变现</a>
</div>
</div>
{{/each}}
</script>
<!--已获取激活码-->
<script id="actLists" type="text/html">
{{each data item}}
<div class="card-content">
<div class="card-box">
<p class="card-num">{{item.number}}</p>
<p class="card-activation">激活码:{{item.activateCode}}</p>
<div class="card-money">
￥<span>{{item.price}}</span>
</div>
</div>
</div>
{{/each}}
</script>
<script>
/*tab选共享卡*/
var tab = document.querySelectorAll(".tab span");
var list = document.querySelectorAll(".card-list");
var index = 0;
for(var i = 0; i < tab.length; i++) {
tab[i].setAttribute("index", i);
tab[i].onclick = function() {
reset();
index = this.getAttribute("index");
tab[index].className = "tab-on";
list[index].style.display = "block";
}
}
function reset() {
for(var i = 0; i < tab.length; i++) {
tab[i].className = "";
list[i].style.display = "none"
}
}
/*接口请求参数*/
var page = 1; //未激活分页页码
var page1 = 1; //已激活分页页码
var limit = 3; //分页大小 默认10条
var clientType = sessionStorage.getItem("clientType");
var authKey = sessionStorage.getItem("Tn");
/*加载更多参数*/
var unActListsArr = [];//未激活数据容器
var actListsArr = [];//已激活数据容器
var moreLoad=true;//未激活是否加载更多
var moreLoad1=true;//已激活是否加载更多
/*获取未激活的卡列表*/
unActLists()
function unActLists() {
console.log("未激活页码",page)
$.ajax({
url: Api.UnactLists,
dataType: "json",
data: {
"page": page,
"limit": limit,
"clientType": clientType,
"authKey": authKey
},
success: function(res) {
/*数据小于分页大小即为最后一页不再请求数据*/
if(res.data.length<limit){
moreLoad=false;
}
unActListsArr=unActListsArr.concat(res.data);
$("#notActiveList").html(template('unActLists', {
data: unActListsArr
}))
}
});
}
/*获取已激活的卡列表*/
actLists()
function actLists() {
console.log("已激活页码",page1)
$.ajax({
url: Api.ActLists,
dataType: "json",
data: {
"page": page1,
"limit": limit,
"clientType": clientType,
"authKey": authKey
},
success: function(res) {
/*数据小于分页大小即为最后一页不再请求数据*/
if(res.data.length<limit){
moreLoad1=false;
}
actListsArr = actListsArr.concat(res.data)//与上一页数据拼接到一起
$("#activeList").html(template('actLists', {
data: actListsArr
}))
}
});
}
var activeList = document.querySelector("#activeList");
/*分页*/
document.onscroll = function(e) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight;
//页面滚动高度+屏幕高度(这里是内容显示区域高度)>列表高度 加载下一页
if((scrollTop + clientHeight) >= activeList.offsetHeight) {
if(index=="0"){
//未激活
if(!moreLoad) {
return;
}
page++;
unActLists();
}else{
//已激活
if(!moreLoad1) {
return;
}
page1++;
actLists();
}
}
}
</script>
</body>
</html>