jQuery上拉加载更多
生活随笔
收集整理的這篇文章主要介紹了
jQuery上拉加载更多
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<header id="header">首 頁(yè)</header><section id="main"><ul id="list_box"></ul>
</section><footer id="footer"><div class="active">首頁(yè)</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, //分頁(yè)碼off_on = false, //分頁(yè)開(kāi)關(guān)(滾動(dòng)加載方法 1 中用的)timers = null; //定時(shí)器(滾動(dòng)加載方法 2 中用的)//加載數(shù)據(jù)
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>上滑列加載表內(nèi)容上滑列加載表內(nèi)容上滑列加載表內(nèi)容上滑列加載表內(nèi)容</span></li>';}$('#list_box').append(dom);off_on = true; //[重要]這是使用了 {滾動(dòng)加載方法1} 時(shí) 用到的 ！！！[如果用 滾動(dòng)加載方法1 時(shí)：off_on 在這里不設(shè) true的話， 下次就沒(méi)法加載了哦！]
};//初始化， 第一次加載
$(document).ready(function() {LoadingDataFn();
});//底部切換
$(document.body).on('click', '#footer div', function() {$(this).addClass('active').siblings().removeClass('active');
});//滾動(dòng)加載方法1
$('#main').scroll(function() {//當(dāng)時(shí)滾動(dòng)條離底部60px時(shí)開(kāi)始加載下一頁(yè)的內(nèi)容if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {//這里用 [ off_on ] 來(lái)控制是否加載 （這樣就解決了 當(dāng)上頁(yè)的條件滿足時(shí)，一下子加載多次的問(wèn)題啦）if (off_on) {//off_on = false;//page++;//console.log("第"+page+"頁(yè)");//LoadingDataFn(); //調(diào)用執(zhí)行上面的加載方法
}}
});//滾動(dòng)加載方法2
$('#main').scroll(function() {//當(dāng)時(shí)滾動(dòng)條離底部60px時(shí)開(kāi)始加載下一頁(yè)的內(nèi)容if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {clearTimeout(timers);//這里還可以用 [ 延時(shí)執(zhí)行 ] 來(lái)控制是否加載 （這樣就解決了 當(dāng)上頁(yè)的條件滿足時(shí)，一下子加載多次的問(wèn)題啦）timers = setTimeout(function() {page++;console.log("第" + page + "頁(yè)");LoadingDataFn(); //調(diào)用執(zhí)行上面的加載方法}, 300);}
});//還可以基window窗口（body）來(lái)添加滾動(dòng)事件, (因?yàn)椴季植煌?所以在這里沒(méi)效果，因?yàn)閇上面是基于body中的某個(gè)元素來(lái)添加滾動(dòng)事的])
$(window).scroll(function() {//當(dāng)時(shí)滾動(dòng)條離底部60px時(shí)開(kāi)始加載下一頁(yè)的內(nèi)容if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {clearTimeout(timers);timers = setTimeout(function() {page++;console.log("第" + page + "頁(yè)");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">首 頁(yè)</header><section id="main"><ul id="list_box"></ul>
</section><footer id="footer"><div class="active">首頁(yè)</div><div>商城</div><div>其他</div><div>我的</div>
</footer><script>
var page = 1, //分頁(yè)碼off_on = false, //分頁(yè)開(kāi)關(guān)(滾動(dòng)加載方法 1 中用的)timers = null; //定時(shí)器(滾動(dòng)加載方法 2 中用的)//加載數(shù)據(jù)
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>上滑列加載表內(nèi)容上滑列加載表內(nèi)容上滑列加載表內(nèi)容上滑列加載表內(nèi)容</span></li>';}$('#list_box').append(dom);off_on = true; //[重要]這是使用了 {滾動(dòng)加載方法1} 時(shí) 用到的 ！！！[如果用 滾動(dòng)加載方法1 時(shí)：off_on 在這里不設(shè) true的話， 下次就沒(méi)法加載了哦！]
};//初始化， 第一次加載
$(document).ready(function() {LoadingDataFn();
});//底部切換
$(document.body).on('click', '#footer div', function() {$(this).addClass('active').siblings().removeClass('active');
});//滾動(dòng)加載方法1
$('#main').scroll(function() {//當(dāng)時(shí)滾動(dòng)條離底部60px時(shí)開(kāi)始加載下一頁(yè)的內(nèi)容if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {//這里用 [ off_on ] 來(lái)控制是否加載 （這樣就解決了 當(dāng)上頁(yè)的條件滿足時(shí)，一下子加載多次的問(wèn)題啦）if (off_on) {//off_on = false;//page++;//console.log("第"+page+"頁(yè)");//LoadingDataFn(); //調(diào)用執(zhí)行上面的加載方法
}}
});//滾動(dòng)加載方法2
$('#main').scroll(function() {//當(dāng)時(shí)滾動(dòng)條離底部60px時(shí)開(kāi)始加載下一頁(yè)的內(nèi)容if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {clearTimeout(timers);//這里還可以用 [ 延時(shí)執(zhí)行 ] 來(lái)控制是否加載 （這樣就解決了 當(dāng)上頁(yè)的條件滿足時(shí)，一下子加載多次的問(wèn)題啦）timers = setTimeout(function() {page++;console.log("第" + page + "頁(yè)");LoadingDataFn(); //調(diào)用執(zhí)行上面的加載方法}, 300);}
});//還可以基window窗口（body）來(lái)添加滾動(dòng)事件, (因?yàn)椴季植煌?所以在這里沒(méi)效果，因?yàn)閇上面是基于body中的某個(gè)元素來(lái)添加滾動(dòng)事的])
$(window).scroll(function() {/* //當(dāng)時(shí)滾動(dòng)條離底部60px時(shí)開(kāi)始加載下一頁(yè)的內(nèi)容if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {clearTimeout(timers);timers = setTimeout(function() {page++;console.log("第" + page + "頁(yè)");LoadingDataFn();}, 300);} */
});</script>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/phpfensi/p/7298546.html
總結(jié)
以上是生活随笔為你收集整理的jQuery上拉加载更多的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 安静与流动
- 下一篇： 2.1 js 基础--select深入