zoukankan      html  css  js  c++  java
  • 页面滚动到底部自动加载下一页功能的实现

    页面滚动到底部自动加载下一页功能的实现,效果见本博首页

    1、endlesspage.js文件内容

    var gPageSize = 10;
    var i = 1; //设置当前页数,全局变量
    var finished = false;
    var dataUrl = '';
    
    $(function () {
        //根据页数读取数据
        function getData(pagenumber) {
            //console.log(i);
            $.get(dataUrl, { pagesize: gPageSize, p: pagenumber }, function (data) {
                //if (data.length > 0) {
                    //var jsonObj = JSON.parse(data);
                    jsonObj = data.info;
                    insertDiv(jsonObj);
                //}
            });
            $.ajax({
                type: "post",
                url: dataUrl,
                data: { pagesize: gPageSize, p: pagenumber },
                dataType: "json",
                success: function (data) {
                    $(".loading").hide();
                    if (data.length > 0) {
                        //var jsonObj = JSON.parse(data);
                        jsonObj = data.info;
                        insertDiv(jsonObj);
                    }
                },
                beforeSend: function () {
                    $(".loading").show();
                },
                error: function () {
                    $(".loading").hide();
                }
            });
            i++; //页码自动增加,保证下次调用时为新的一页。
        }
    
        //核心代码
        var winH = $(window).height(); //页面可视区域高度 
        var scrollHandler = function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滚动条top 
            var aa = (pageH - winH - scrollT) / winH;
            if (!finished && aa < 0.2) { //0.02是个参数
                if (i % 10 === 0) { //每10页做一次停顿
                    getData(i);
                    $(window).unbind('scroll');
                    $("#btn_Page").show();
                } else {
                    getData(i);
                    finished = true;
                    setTimeout(function(){finished = false;},500);
                    $("#btn_Page").hide();
                }
            }
        }
    
        //初始化加载第一页数据
        getData(1);
    
        //定义鼠标滚动事件
        $(window).scroll(scrollHandler);
    
        //继续加载按钮事件
        $("#btn_Page").click(function () {
            getData(i);
            $(window).scroll(scrollHandler);
        });
    });

    2、界面调用

    <script src="__PUBLIC__/Js/endlesspage.js"></script>
    <script type="text/javascript">
        dataUrl = "/Home/Index/index2";
        //生成数据html,append到div中
        function insertDiv(jsonData) {
            var $mainDiv = $(".articleList");
            var html = '';
            for (var i = 0; i < jsonData.length; i++) {
                html += '<div class="panel panel-success">';
                html += '<div class="panel-heading"><h4 class="panel-title"><button type="button" class="btn btn-danger btn-sm"><i class="fa fa-bar-chart-o fa-fw">' + jsonData[i].visitNums + '</i></button> <a href="/Home/Article/detail/id/' + jsonData[i].id + '">' + jsonData[i].title + '</a></h4></div>';
                html += '<div class="panel-body"><p>' + jsonData[i].summary + '</p></div>';
                html += '<div class="panel-footer"> <em class = "pull-right"> ' + jsonData[i].channelName + ' </em><em>最后更新: ' + date('Y-m-d H:i:s', jsonData[i].update_time) + ' </em></div>';
                html += '</div>';
            }
            $mainDiv.append(html);
        }
    </script>
  • 相关阅读:
    14_java之变量|参数|返回值|修饰符
    NYOJ 202 红黑树 (二叉树)
    NYOJ 138 找球号(二) (哈希)
    NYOJ 136 等式 (哈希)
    NYOJ 133 子序列 (离散化)
    NYOJ 129 树的判定 (并查集)
    NYOJ 117 求逆序数 (树状数组)
    NYOJ 93 汉诺塔 (数学)
    HDU 2050 折线分割平面 (数学)
    天梯赛L2-008 最长对称子串 (字符串处理)
  • 原文地址:https://www.cnblogs.com/yhdsir/p/5026279.html
Copyright © 2011-2022 走看看