滚动条下拉到最底端加载数据

原文链接：https://blog.csdn.net/qq_33527238/article/details/72518345

加载效果：

加载更多
加载完成

场景：加载与客户的沟通记录，一个客户的记录长期积累下来是非常多的，需要实现网页滚动到页面底端时加载更多数据
方法：加载更多的实质还是分页查询，只是展示方式不向分页那样只展示一页的内容

代码中class/id 都需要自己写样式，css不再展示，@ViewBag.** 为后台传过来的值，我用的.net mvc

<script>
    var page=1;
    var finished=0;
    var sover=0;
    //如果屏幕未到整屏自动加载下一页补满，#followingpage此页的div的id
    var setdefult=setInterval(function (){
        if(sover==1)
            clearInterval(setdefult);
        else if($("#followingpage").height()<$(window).height())
            loadmore($(window));
        else
            clearInterval(setdefult);
    },500);
    //加载完
    function loadover(){
        if(sover==1)
        {
            var overtext="—————————我— — —是— — —有— — —底— — —线— — —的—————————";
            $(".loadmore").remove();
            if($(".loadover").length>0)
            {
                $(".loadover span").eq(0).html(overtext);
            }
            else
            {
                var txt='<div class="loadover"><span>'+overtext+'</span></div>'
                $("body").append(txt);
            }
        }
    }
    //加载更多

        function loadmore(obj) {
        if(finished==0 && sover==0)
        {
            var scrollTop = $(obj).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(obj).height();

            if($(".loadmore").length==0)
            {
                var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'
                $("body").append(txt);
            }

            var sign = false;
            if (scrollTop + windowHeight - scrollHeight >= 0) {
                sign = true;
                var result = "";
                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作,sign标志ajax是否执行
                if (sign) {
                //防止未加载完再次执行
                finished = 1;
                    $.ajax({
                        url: "../Following/getJsonFollowingResult?customerNumber=" +@ViewBag.customerNumber+"&pageCount=" +@ViewBag.pageCount+"&pageIndex=" + page,
                        type: "get",
                        async:false,
                        success: function (data) {
                            if (Number(JSON.stringify(data.rows.length)) > 0) {
                                $.each(data.rows, function (i, item) {
                                    var strdate;
                                    if (item.recorddate.substr(0, 4) == @DateTime.Today.Year.ToString()) {
                                        strdate = "<span class=\"timelabelcontent\">" + item.recorddate.substr(5) + "</span>";
                                    }
                                    else {
                                        strdate = "<span class=\"pretimelabelcontent\">" + item.recorddate + "</span>";
                                    }
                                    result += "<div class=\"record\" id=\"record\">" +
                                        "<div class=\"comment-item-time\">" +
                                        " <div class=\"line\">" +
                                        "<div class=\"timesign\"></div>" +
                                        "<div class=\"clear\"></div>" +
                                        "</div>" +
                                        "<div class=\"timelabel\">" +
                                        "<div class=\"triangle\" style=\"z-index:-9\"></div>" +
                                        strdate +
                                        "<div class=\"clear\"></div>" +
                                        "</div>" +
                                        "</div>"
                                    $.each(item.recordlst, function (j, k) {
                                        var ass = "data:image/png;base64," + k.EmployeePhotos;
                                        var CustomerCategoryName = ""
                                        if (k.CustomerCategoryName == "null") {
                                            CustomerCategoryName = "&nbsp;&nbsp;&nbsp; <span style=\"font-size:14px;\"> " + k.CustomerCategoryName + " &nbsp;: &nbsp;" + k.CustomerCategoryText + "</span>";
                                        }

                                        result += "<div class=\"comment-item\" name=\"" + k.TrackingNumber + "\">" +
                                            "<div class=\"line\">" +
                                            "<div class=\"contentsign\"><i class=\"fa fa-edit\"></i></div>" +
                                            "<div class=\"clear\"></div>" +
                                            "</div>" +
                                            "<div class=\"content\">" +
                                            "<div class=\"triangle\"></div>" +

                                            "<div class=\"contentcontent\">" +
                                            "<div class=\"contentpanel\">" +
                                            "<span></span>" +
                                            "<span class=\"contentname\"><img src=" + ass + " class=\"employeephote\" /><strong>" + k.EmployeeName + "</strong>" + CustomerCategoryName + "</span>" +

                                            "<span class=\"contenttime\">" + k.TrackingDateTime.substr(11) + "</span>" +
                                            "<div style=\"clear:both\"></div>" +
                                            "<div class=\"contentRemark\">" + k.TrackingRemark + " </div>" +
                                            "<div></div>" +
                                            "</div>" +
                                            "</div>" +
                                            "<div class=\"clear\"></div>" +
                                            "</div>" +
                                            "</div>"
                                    })
                                    result += "</div>"
                                })
                            } else
                            {
                                loadover();
                            }
                        },
                        error: function () {
                            loadover();
                        }
                    })
                }
                setTimeout(function(){
                    //$(".loadmore").remove();
                    $('.container').append(result);
                    finished=0;
                    //最后一页
                    if(page==@ViewBag.totalPage)
                    {
                        sover=1;
                        loadover();
                    };
                    page += 1;
                    twoitemclick();
                }, 1000);
            }
        }
        }
    //页面滚动执行事件
    window.onscroll =function (){
        loadmore($(this));
    };

    ////comment-item添加点击事件
    //window.onload = itemclick();
    //function itemclick() {
    //    var contentitem = document.getElementsByClassName('comment-item');
    //    var i
    //    for (i = 0; i < contentitem.length; i++) {
    //        //初始选中第一个
    //        contentitem[0].style.backgroundColor = "#00A5FF";

    //        var pval = document.getElementById('PassValue_TrackingNumber');
    //        pval.innerHTML = contentitem[0].getAttribute("name");

    //        (function (i) {
    //            var ss = contentitem[i];
    //            ss.onclick = function () {
    //                for (var j = 0; j < contentitem.length; j++) {
    //                    contentitem[j].style.backgroundColor = null;
    //                }
    //                contentitem[i].style.backgroundColor = "#00A5FF";
    //                var pval = document.getElementById('PassValue_TrackingNumber');
    //                pval.innerHTML = contentitem[i].getAttribute("name");
    //            }
    //        })(i)
    //    }
    //}
    //加载更多后的点击事件
     function twoitemclick() {
        var contentitem = document.getElementsByClassName('comment-item');
        var i
         for (i = 0; i < contentitem.length; i++) {
            //初始选中第一个
            contentitem[0].style.backgroundColor = "#00A5FF";

            var pval = document.getElementById('PassValue_TrackingNumber');
             pval.innerHTML = contentitem[0].getAttribute("name");

            (function (i) {
                var ss = contentitem[i];
                ss.onclick = function () {
                    for (var j = 0; j < contentitem.length; j++) {
                        contentitem[j].style.backgroundColor = null;
                    }
                    contentitem[i].style.backgroundColor = "#00A5FF";
                    var pval = document.getElementById('PassValue_TrackingNumber');
                    pval.innerHTML = contentitem[i].getAttribute("name");
                }
            })(i)
        }
    }
</script>