So erreichen Sie mit js und jquery ein unendliches Laden von Seiten

Beispiel:
Produktliste für mobile Jingdong-Seiten

Definieren Sie zunächst die Scroll-Bindungsfunktion für das Seiten-Scroll-Ereignis

$(window).on("scroll", function() {
    scrollFunction();
})

Dann definieren Sie die Funktion 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();
    }

}

Beispiel für jedes Element auf der Seite:

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit js und jquery ein unendliches Laden von Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!