asp.net滚动加载

2019独角兽企业重金招聘Python工程师标准>>>

前台页面的js代码如下：

<script type="text/javascript">
        $(function () {
            var count = 10;
            var start = 0;
            function initPage() {//初始化页面
                $.getJSON("Handler/Handler.ashx", { action: "GetMoreNews", count: count, start: start }, function (json) {
                    var str = "";
                    $.each(json, function (index, array) {
                        var str = "<div class='single_item'>"
                                              + "<div class='element_head'>"
                                                 + "<div class='author'>" + array['Title'] + "</div>"
                                                 + "<div class='date'>" + array['Date'] + "</div>"
                                              + "</div>"
                                            + "<div class='content'>" + array['Contents'] + "</div>"
                                          + "</div>";
                        $("#container").append(str);
                    });
                });
            }

            initPage();
            $("#nodata").hide();
            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("Handler/Handler.ashx", { action: "GetMoreNews", count: count, start: start + 10 }, function (json) {
                        if (json!="") {
                        var str = "";
                        $.each(json, function (index, array) {
                            var str = "<div class='single_item'>"
                                              + "<div class='element_head'>"
                                                 + "<div class='author'>" + array['Title'] + "</div>"
                                                 + "<div class='date'>" + array['Date'] + "</div>"
                                              + "</div>"
                                            + "<div class='content'>" + array['Contents'] + "</div>"
                                          + "</div>";
                            $("#container").append(str);
                        });
                        start = start + 10;
                        } else {
                            $("#nodata").show().html("别滚动了，已经到底了。。。");
                            return false;
                        }
                    });
                }
            });
        });
    </script>

关于Handler页面的代码，里面包含了存储过程和方法，可以看我的asp.net点击‘查看更多’实现无刷新加载这篇文章，我大体解释一下上面代码的意思。首先定义了一init函数，用来首次加载初始化用的，页面首次加载时就显示前十条信息，scroll方法同init方法，当滚动条快到页面底部时即触发了window对象的scroll方法，这时count=10，而start=start+10=10了，当滚动条快到页面底部时就调用自身的scroll方法，

前台的html代码很简单

 

<div id="container"></div>
<div id="nodata"></div>

效果图如下：

转载于:https://my.oschina.net/hellokitty/blog/63965