滚动加载更多

Posted 2020-09-19

//第一种方法    

var winH = $(window).height(); //页面可视区域高度
    var i = 1; //设置当前页数
    $(window).scroll(function () {
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop(); //滚动条top
        var aa = (pageH-winH-scrollT)/winH;
        if(aa<0.02){
            $.getJSON("/Index/getauto",{page:i},function(json){
                if(json){
                    var str = "";
                    $.each(json,function(index,array){
                        var str = "<ul class=\"arrow_box\"><div class=\"sy\"><p>"+array[‘content‘]+"</p></div><span class=\"dateview\">"+array[‘time‘]+"</span></ul>";
                        $(".bloglist").append(str);
                    });
                    i++;
                }else{
                    $("#nodata").show().html("已经到底了。。。");
                    return false;
                }
            });
        }
    });
});


//第二种方法
 $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        var lastid=$("#listli li:last-child").attr(‘id‘);


        console.log(scrollHeight - scrollTop - windowHeight)
        if (scrollHeight - scrollTop - windowHeight  < 1) {

            $.ajax({
                url: "index.php",
                type: ‘get‘,
                datatype:‘json‘,
                data: {act:‘article‘,op:‘getShopOnlineArtlist‘,start: lastid },

                success: function (json) {
                    if(json){
                        var str = "";
                        $.each(json,function(index,array){

                        var str=‘<li id="‘+(lastid+index+1) +‘">‘+ ‘<span class="newslist ">‘
                            +‘<img src="http://img.sxnxl.com/data/upload/shop/editor/20170213171455_63246.jpg" width="430" height="180">‘
                            +‘<span>‘
                            +‘<h3> 政策。。。。。</h3>‘
                            +‘<p class="gray">时间：2017-02-13 17:15:14</p>‘
                            +‘<p>content content</p>‘
                            +‘<p class="red"><a href="index.php?act=article&amp;op=show&amp;article_id=500">查看详情&gt;&gt;</a></p>‘
                            +‘</span><div class="clearh" style="height:0"></div></span><div class="clearh" style="height:0"></div></li>‘



                            $("#listli").append(str);
                        });
                       
                    }else{
                        $("#nodata").show().html("已经到底了。。。");
                        return false;
                    }

                }
            })

        }
    })


//第三种方法
    $(function(){
        var lastid=$("#listli li:last-child").attr(‘id‘);

        var winH = $(window).height(); //页面可视区域高度
           $(window).scroll(function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滚动条top
            var aa = (pageH-winH-scrollT)/winH;
            if(aa<0.02){
                $.getJSON("index.php?act=article&op=getShopOnlineArtlist",{start:parseInt(lastid)+1},

                    function(json){
                        if(!$.isEmptyObject(json)){
                        var str = "";
                        $.each(json,function(index,array){
                            var ids=parseInt(lastid)+index+1;
                            var str=‘<li id="‘+ ids +‘">‘+ ‘<span class="newslist ‘+ array.class +‘ ">‘
                                +‘<img src="‘+array.article_img+‘" width="430" height="180">‘
                                +‘<span>‘
                                +‘<h3> ‘+ array.article_title+‘</h3>‘
                                +‘<p class="gray">时间：‘+ array.article_time+‘</p>‘
                                +‘<p>‘+array.article_content+‘</p>‘
                                +‘<p class="red"><a href="http://www.sxnxl.com/shop/index.php?act=article&amp;op=show&amp;article_id=‘+ array.article_id+‘">查看详情&gt;&gt;</a></p>‘
                                +‘</span><div class="clearh" style="height:0"></div></span><div class="clearh" style="height:0"></div></li>‘;
                            $("#listli").append(str);

                        });
                        lastid=parseInt(lastid)+4;
                    }else{
                        $("#nodata").html(‘没有更多了～～‘);
                        return false;
                    }
                });
            }
        });
    });