Maison > Article > interface Web > Comment obtenir un chargement de page infini en utilisant js et jquery
Exemple :
Liste de produits de la page mobile Jingdong
Définissez d'abord la fonction de liaison de défilement d'événement de défilement de page
$(window).on("scroll", function() { scrollFunction(); })
Puis définissez la fonction 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(); } }
Exemple de chaque élément de la page :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!