jQuery上拉加载更多
生活随笔
收集整理的這篇文章主要介紹了
jQuery上拉加载更多
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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(); //調用執(zhí)行上面的加載方法
}}
});//滾動加載方法2
$('#main').scroll(function() {//當時滾動條離底部60px時開始加載下一頁的內容if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {clearTimeout(timers);//這里還可以用 [ 延時執(zhí)行 ] 來控制是否加載 （這樣就解決了 當上頁的條件滿足時，一下子加載多次的問題啦）timers = setTimeout(function() {page++;console.log("第" + page + "頁");LoadingDataFn(); //調用執(zhí)行上面的加載方法}, 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(); //調用執(zhí)行上面的加載方法
}}
});//滾動加載方法2
$('#main').scroll(function() {//當時滾動條離底部60px時開始加載下一頁的內容if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {clearTimeout(timers);//這里還可以用 [ 延時執(zhí)行 ] 來控制是否加載 （這樣就解決了 當上頁的條件滿足時，一下子加載多次的問題啦）timers = setTimeout(function() {page++;console.log("第" + page + "頁");LoadingDataFn(); //調用執(zhí)行上面的加載方法}, 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>
?
轉載于:https://www.cnblogs.com/phpfensi/p/7298546.html
總結
以上是生活随笔為你收集整理的jQuery上拉加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安静与流动
- 下一篇： Quartz.NET总结（四）Quart