JS滚动条到网页底部自动加载更多内容

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

<html> <head> <meta charset="gb18030" />
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script>
        var totalheight = 0;
        function loadData(){
            totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());

            if ($(document).height() <= totalheight) {  // 说明滚动条已达底部
                /*这里使用Ajax加载更多内容*/
                var container = $("#container"); // 加载容器
                var data = {}; // 查询参数
                // 当前页
                var currentPage = parseInt(container.find('#currentPage').val());
                // 总页数
                var maxPage = parseInt(container.find('#maxPage').val());
                // 查询日期范围
                var startDate = container.find('#startDate').val());
                var endDate = container.find('#endDate').val());
                data.currentPage = currentPage;
                data.maxPage = maxPage;
                data.startDate =startDate;
                data.endDate = endDate;
                jQuery.ajax({
                    type:"POST",
                    url: "/servlet/query.do",
                    data:data,
                    dataType: "json",
                    beforeSend: function(XMLHttpRequest){
                        $("#loading").css('display','');
                    }, success:function(response) {
                        if(response.data){
                            for(var i=0, length = response.data.length; i<length; i++){
                                var html = response.data[i];
                                var test = $(html);
                                container.append(test);
                            }
                            container.find('#currentPage').val(parseInt(currentPage)+1));
                            $("#loading").css('display','none');
                        }
                    }, error:function(){
                        alert("加载失败");
                    }
                });
            }
        }
        $(window).scroll( function() {
            loadData();
        });
    </script>
</head>
<body>
    <div id="container">
        这里显示内容
    </div>
    <div id='loading'>
        <img src="./imgs/loading.gif"/>
    </div>
</body>
</html>

转载于:https://my.oschina.net/kt431128/blog/224711

JS滚动条到网页底部自动加载更多内容相关推荐

jQuery插件实现网页底部自动加载-类似新浪微博
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了. $(document).scrollTop() //获取垂直滚动条到顶部的距离 ...
html5到底部自动加载,列表滚动到底部自动加载更多
列表滚动到底部自动加载更多在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路. 通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间 ...
探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...
Jetpack Compose 无限加载列表（滚到底部自动加载更多）
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging ...
php滑到底部自动加载更多,ListView滑动到底部自动加载更多
第一种滑动的时候不会停顿 listView.setOnScrollListener(new OnScrollListener() { @Override public void onScrollSt ...
html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
android音乐播放器音乐加载,Android开源音乐播放器之在线音乐列表自动加载更多...
系列文章前言当咱们的ListView数据比较多时,咱们通常都会选择分页显示,而分页显示就须要一个动做触发加载更多操做,一般咱们会使用上拉加载更多,但我以为不够人性化,由于用户须要手动上拉,因此更加 ...
JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...

JS滚动条到网页底部自动加载更多内容

JS滚动条到网页底部自动加载更多内容相关推荐

最新文章

热门文章