手機端分頁

時間 2019-11-11

標籤手機分頁简体版

原文原文鏈接

這個頁面有二個分頁，jq就用了個ajax其餘都是用js寫的，javascript

原理：頁面滾動時若是頁面滾動高度+內容顯示區域的高度>列表高度加載下一頁有分頁時列表高度前二個和還要大的。頁面滾動高度+屏幕高度是由於手機端列表內容是第一頁與以後的頁面的疊加css

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。