ホームページ > 記事 > ウェブフロントエンド > jsとjqueryを使用して無限のページ読み込みを実現する方法
例:
京東モバイルページの商品リスト
最初にページスクロールイベントのスクロールバインディング関数を定義します
$(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(); } }
ページの各要素 例:
以上がjsとjqueryを使用して無限のページ読み込みを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。