Maison  >  Article  >  interface Web  >  Comment obtenir un chargement de page infini en utilisant js et jquery

Comment obtenir un chargement de page infini en utilisant js et jquery

一个新手
一个新手original
2017-09-18 10:14:282321parcourir

Exemple :
Liste de produits de la page mobile Jingdong
Comment obtenir un chargement de page infini en utilisant js et jquery
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 :
Comment obtenir un chargement de page infini en utilisant js et jquery

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn