jq上滑加载更多
程序员文章站
2022-03-21 21:29:19
html 结构 script部分 ......
html 结构
<div id="main"> <ul class="order-list" id="list_box"> // li </ul>
<div id="getmore">
正在加载。。。
</div>
</div>
script部分
var page = 1, //分页码 off_on = false, //分页开关 timers = null; //定时器 var p = 0, t = 0; //加载数据 var loadingdatafn = function () { $("#getmore").show() var dom = ''; for (var i = 0; i < 20; i++) { dom += '<li>'+i+'</li>'; } $("#getmore").hide() $('#list_box').append(dom); off_on = true; }; //初始化, 第一次加载 $(document).ready(function () { loadingdatafn(); }); $(window).scroll(function () { //当时滚动条离底部60px时开始加载下一页的内容 p = $(this).scrolltop(); if (t <= p) {//下滚 // if (($(window).height() + $(window).scrolltop() + 60) >= $(document).height()) { cleartimeout(timers); timers = settimeout(function () { page++; console.log("第" + page + "页"); loadingdatafn() }, 300); } } else {//上滚 // } settimeout(function () { t = p; }, 0); });