兩個菜單頁面組成的手機頁面滑動加載更多，觸摸上滑可以加載更多記錄，最多30條。最多加載數和每次加載數都可在jquery中配置。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
</head>
<body>
<nav style="width:100%">
<span class="menuClass nav-active" id="spanMenuOne" onclick="switchMenu(this.id)">菜單一</span>
<span class="menuClass" id="spanMenuTwo" onclick="switchMenu(this.id)">菜單二</span>
</nav>
<div class="main" style="width:100%">
<div id="MenuOne">
<ul class="ulClass">
<li class="liClass">
<div class="lileft">菜單一第1項第1列</div>
<div class="liright">菜單一第1項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單一第2項第1列</div>
<div class="liright">菜單一第2項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單一第3項第1列</div>
<div class="liright">菜單一第3項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單一第4項第1列</div>
<div class="liright">菜單一第4項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單一第5項第1列</div>
<div class="liright">菜單一第5項第2列</div>
</li>
</ul>
</div>
<div id="MenuTwo" style="display: none;">
<ul class="ulClass">
<li class="liClass">
<div class="lileft">菜單二第1項第1列</div>
<div class="liright">菜單二第1項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單二第2項第1列</div>
<div class="liright">菜單二第2項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單二第3項第1列</div>
<div class="liright">菜單二第3項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單二第4項第1列</div>
<div class="liright">菜單二第4項第2列</div>
</li>
<li class="liClass">
<div class="lileft">菜單二第5項第1列</div>
<div class="liright">菜單二第5項第2列</div>
</li>
</ul>
</div>
</div>
<input id="menuOneTotal" type="hidden" name="menuOneTotal" value="20"/>
<input id="menuTwoTotal" type="hidden" name="menuTwoTotal" value="15"/>
<div style="height:15px;"></div>
<footer>
<a href="http://www.mozhenlong.com" style="text-decoration: none;">
<div class="jump-btn">前往我的主頁</div>
</a>
</footer>
</body>
</html>CSS
<style type="text/css">
.menuClass{
display: inline-block;
width: 180px;
height: 45px;
color: #0092EF;
text-align: center;
vertical-align: middle;
line-height: 45px;
}
.nav-active{
border-bottom: 1px solid #999ec2;
}
li {
list-style: none;
}
.lileft{
float: left;
padding-left: 10px;
}
.liright{
float: right;
padding-right: 10px;
}
.liClass{
height: 38px;
border-bottom: 0.01rem solid #d1d0d0;
vertical-align: middle;
line-height: 38px;
}
footer{
bottom: 0;
width: 100%;
position: fixed;
text-align: center;
}
.ulClass{
padding: 0;
}
body{
font-family: 微軟雅黑;
margin: 0;
}
.jump-btn{
background-color: white;
height: 30px;
line-height: 30px;
vertical-align: middle;
}
</style>JQuery
<script type="text/javascript">
var pageSize = 5;
//tap 之間的切換
function switchMenu(srcId) {
pageSize = 0;
$("#MenuOne").html("");
$("#MenuTwo").html("");
if (srcId == "spanMenuOne") {
$("#spanMenuTwo").removeClass("nav-active");
$("#spanMenuOne").addClass("nav-active");
$("#MenuOne").css("display", "");
$("#MenuTwo").css("display", "none");
AppendHtml("MenuOne");
} else if (srcId == "spanMenuTwo") {
$("#spanMenuTwo").addClass("nav-active");
$("#spanMenuOne").removeClass("nav-active");
$("#MenuOne").css("display", "none");
$("#MenuTwo").css("display", "");
AppendHtml("MenuTwo");
}
}
//獲取隱藏域中的總數值
function getTotal(num) {
if (num == 1) {
return parseInt($("#MenuOne").val());
} else if (num == 2) {
return parseInt($("#MenuTwo").val());
}
}
function AppendHtml(id){
var menuNum = "";
if (id == "MenuOne") {
menuNum = "一";
} else if (id == "MenuOne") {
menuNum = "二";
}
if (pageSize >= 30) {
return;
} else{
if ($("#" + id).html() == "") {
$("#" + id).append('<ul class="ulClass"></ul>');
}
for (let i=1;i<=5;i++) {
var strAppend = '<li class="liClass"><div class="lileft">菜單' + menuNum +'第'
var t = pageSize + i;
strAppend += t +'項第1列</div><div class="liright">菜單' + menuNum +'第' + t+'項第2列</div></li>';
$("#" + id + " ul:first").append(strAppend);
}
pageSize += 5;
}
}
//觸摸滑動事件
var pageIndex = "0";
var startY, y = 0;
var isEnd = true;
//獲取剛觸摸時的縱軸座標
function touchSatrt(e) {
var touch = e.touches[0];
y = 0;
startY = touch.pageY;
}
//獲取滑動的距離
function touchMove(e) {
var touch = e.touches[0];
y = touch.pageY - startY;
}
//判斷是否已達最後一頁
function IsLastPage(totalPage) {
if (parseInt(pageIndex) >= parseInt(totalPage)) {
return true;
}
return false;
}
//觸摸滑動後手指離開屏幕
function touchEnd(e) {
if (y < 0) {
if (e.currentTarget.id == "MenuOne") {
if (!IsLastPage(getTotal(2))) {
AppendHtml("MenuOne");
}
}
else if (e.currentTarget.id == "MenuTwo") {
if (!IsLastPage(getTotal(1))) {
AppendHtml("MenuTwo");
}
}
}
}
//註冊事件
document.getElementById("MenuOne").addEventListener('touchstart', touchSatrt, false);
document.getElementById("MenuOne").addEventListener('touchmove', touchMove, false);
document.getElementById("MenuOne").addEventListener('touchend', touchEnd, false);
document.getElementById("MenuTwo").addEventListener('touchstart', touchSatrt, false);
document.getElementById("MenuTwo").addEventListener('touchmove', touchMove, false);
document.getElementById("MenuTwo").addEventListener('touchend', touchEnd, false);
</script>