• 周四. 8月 11th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

jQuery-Ajax H5无刷新分页

admin

11月 28, 2021
//滚动条滚动的时候
    $(window).scroll(function(){
        var now = $('#page').val();
        // scrollTop 滚动条滚动时,距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // windowHeight 可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // scrollHeight 滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        // 滚动条到底部的条件
        if (scrollTop + windowHeight + 1 == scrollHeight) {
            now++;
            $.ajax({
                type: 'GET',
                cache: false,
                dataType: 'JSON',
                url: "/url/list/?page="+now,
                success:function(result){
                    if (result.status == 1) {
                        var html = '';
                        $.each(result.data.list, function(i, obj) {
                            html += '<dl><a href="javascript:void(0);" onclick="detail('+obj.id+')"><dd>';
                            html += '<p>'+obj.title+'</p>';
                            html += '<span>'+obj.number+'</span></dd>';
                            html += '<dt><img src="'+obj.pic+'" alt=""></dt></a></dl>';
                        });
                        $(".class").append(html);
                        $("#page").attr('value', now);
                    }else {
                        alert(result.msg);
                    }
                }
            });
        }
    });

发表评论

您的电子邮箱地址不会被公开。