<header id="header">首 頁</header>
<section id="main">
<ul id="list_box"></ul>
</section>
<footer id="footer">
<div class="active">首頁</div>
<div>商城</div>
<div>其他</div>
<div>我的</div>
</footer>
* {
margin:0px;
padding:0px;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background:#FAA732;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
}
#main {
position:absolute;
top:50px;
left:0px;
right:0px;
bottom:51px;
padding:10px;
overflow:auto;
}
#main li {
display:flex;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid gray;
border-radius:4px;
background:#EEE;
}
#main li img {
flex:50px 0 0;
width:50px;
height:50px;
padding:4px;
border:1px solid green;
}
#main li span {
padding-left:4px;
line-height:24px;
}
#footer {
display:flex;
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:50px;
border-top:1px solid gray;
background:#FAA732;
}
#footer div {
flex:1;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
border-right:1px solid white;
}
#footer div:nth-child(4) {
border:none;
}
#footer .active {
background:#0086FF;
}
var page = 1, //分頁碼
off_on = false, //分頁開關(滾動加載方法 1 中用的)
timers = null; //定時器(滾動加載方法 2 中用的)
//加載數據
var LoadingDataFn = function() {
var dom = '';
for (var i = 0; i < 20; i++) {
dom += '<li><img src="http://www.jq22.com/img/cs/500x500a.png"/><span>上滑列加載表內容上滑列加載表內容上滑列加載表內容上滑列加載表內容</span></li>';
}
$('#list_box').append(dom);
off_on = true; //[重要]這是使用了 {滾動加載方法1} 時 用到的 ！！！[如果用 滾動加載方法1 時：off_on 在這里不設 true的話， 下次就沒法加載了哦！]
};
//初始化， 第一次加載
$(document).ready(function() {
LoadingDataFn();
});
//底部切換
$(document.body).on('click', '#footer div', function() {
$(this).addClass('active').siblings().removeClass('active');
});
//滾動加載方法1
$('#main').scroll(function() {
//當時滾動條離底部60px時開始加載下一頁的內容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//這里用 [ off_on ] 來控制是否加載 （這樣就解決了 當上頁的條件滿足時，一下子加載多次的問題啦）
if (off_on) {
//off_on = false;
//page++;
//console.log("第"+page+"頁");
//LoadingDataFn(); //調用執行上面的加載方法
}
}
});
//滾動加載方法2
$('#main').scroll(function() {
//當時滾動條離底部60px時開始加載下一頁的內容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//這里還可以用 [ 延時執行 ] 來控制是否加載 （這樣就解決了 當上頁的條件滿足時，一下子加載多次的問題啦）
timers = setTimeout(function() {
page++;
console.log("第" + page + "頁");
LoadingDataFn(); //調用執行上面的加載方法
}, 300);
}
});
//還可以基window窗口（body）來添加滾動事件, (因為布局不同,所以在這里沒效果，因為[上面是基於body中的某個元素來添加滾動事的])
$(window).scroll(function() {
//當時滾動條離底部60px時開始加載下一頁的內容
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "頁");
LoadingDataFn();
}, 300);
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery上拉加載更多-jq22.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background:#FAA732;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
}
#main {
position:absolute;
top:50px;
left:0px;
right:0px;
bottom:51px;
padding:10px;
overflow:auto;
}
#main li {
display:flex;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid gray;
border-radius:4px;
background:#EEE;
}
#main li img {
flex:50px 0 0;
width:50px;
height:50px;
padding:4px;
border:1px solid green;
}
#main li span {
padding-left:4px;
line-height:24px;
}
#footer {
display:flex;
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:50px;
border-top:1px solid gray;
background:#FAA732;
}
#footer div {
flex:1;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
border-right:1px solid white;
}
#footer div:nth-child(4) {
border:none;
}
#footer .active {
background:#0086FF;
}
</style>
</head>
<body>
<header id="header">首 頁</header>
<section id="main">
<ul id="list_box"></ul>
</section>
<footer id="footer">
<div class="active">首頁</div>
<div>商城</div>
<div>其他</div>
<div>我的</div>
</footer><script>
var page = 1, //分頁碼
off_on = false, //分頁開關(滾動加載方法 1 中用的)
timers = null; //定時器(滾動加載方法 2 中用的)
//加載數據
var LoadingDataFn = function() {
var dom = '';
for (var i = 0; i < 20; i++) {
dom += '<li><img src="http://www.jq22.com/img/cs/500x500a.png"/><span>上滑列加載表內容上滑列加載表內容上滑列加載表內容上滑列加載表內容</span></li>';
}
$('#list_box').append(dom);
off_on = true; //[重要]這是使用了 {滾動加載方法1} 時 用到的 ！！！[如果用 滾動加載方法1 時：off_on 在這里不設 true的話， 下次就沒法加載了哦！]
};
//初始化， 第一次加載
$(document).ready(function() {
LoadingDataFn();
});
//底部切換
$(document.body).on('click', '#footer div', function() {
$(this).addClass('active').siblings().removeClass('active');
});
//滾動加載方法1
$('#main').scroll(function() {
//當時滾動條離底部60px時開始加載下一頁的內容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//這里用 [ off_on ] 來控制是否加載 （這樣就解決了 當上頁的條件滿足時，一下子加載多次的問題啦）
if (off_on) {
//off_on = false;
//page++;
//console.log("第"+page+"頁");
//LoadingDataFn(); //調用執行上面的加載方法
}
}
});
//滾動加載方法2
$('#main').scroll(function() {
//當時滾動條離底部60px時開始加載下一頁的內容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//這里還可以用 [ 延時執行 ] 來控制是否加載 （這樣就解決了 當上頁的條件滿足時，一下子加載多次的問題啦）
timers = setTimeout(function() {
page++;
console.log("第" + page + "頁");
LoadingDataFn(); //調用執行上面的加載方法
}, 300);
}
});
//還可以基window窗口（body）來添加滾動事件, (因為布局不同,所以在這里沒效果，因為[上面是基於body中的某個元素來添加滾動事的])
$(window).scroll(function() {
/* //當時滾動條離底部60px時開始加載下一頁的內容
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "頁");
LoadingDataFn();
}, 300);
} */
});</script>
</body>
</html>
