Rumah > Artikel > hujung hadapan web > 如何用js和 jquery实现无限加载页面
举例:
京东手机版页面 产品列表
首先 定义页面滚动事件 scroll 绑定函数
$(window).on("scroll", function() { scrollFunction(); })
然后定义函数 scrollFunction()
function scrollFunction() { var e = $("#page-num"); e.scrollTop = $(window).scrollTop(); e.scrollStar = e.scrollEnd; e.scrollEnd = $(window).scrollTop(); // 分页显示 if (e.scrollStar != e.scrollEnd) { // 当滚动的时候 显示分页信息 显示1秒 setTimeout(function() { e.hide(); }, 1000); var j = null; var l = $(window).height(); var d = $(window).scrollTop(); // 新页的产品列表 页数写在 li 标签里 然后循环所有的这个标签 p_lis = $("#goods-ul").find("li"); p_lis_size = p_lis.size(); for(var ss= 0; ss < p_lis_size; ss++){ f = $(p_lis[ss]); var k = f.offset().top; // 这个元素(相对于文档)的 偏移距离 // 偏移距离 大于windows 滚动距离 且 小于滚动距离+页面高度 的用来当作当前页数 if (k >= d && k < (d + l)) { j = f.attr("data-page"); } } if(j){ $("#currentPage").text(j); } e.show(); } }
页面每个元素 样例:
Atas ialah kandungan terperinci 如何用js和 jquery实现无限加载页面. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!