手机端分页

最新推荐文章于 2024-04-10 17:36:22 发布

weixin_30619101

最新推荐文章于 2024-04-10 17:36:22 发布

阅读量1.4k

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zimengxiyu/p/11046276.html

版权

这个页面有二个分页，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>