滚动条下拉自动刷新

李维强-15级 · 发表于 2017-5-15 22:37:29

先甩代码，网上的那些例程实测都不可用。只有我这个才可以用
测试网址：http://pp.cqyyny.cn/MainPage/MainPage ，用手机测

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title></title>

        <link rel="stylesheet" type="text/css" href="/Content/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="/Content/easyui/themes/icon.css">
        
        <script type="text/javascript" src="/Scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="/Scripts/jquery.form.js"></script>
        <script type="text/javascript" src="/Content/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/Content/easyui/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="/Scripts/DGTimeFormatter.js"></script>

        <link rel="stylesheet" type="text/css" href="/Content/CSS/MainPage.css"> 
    </head>
    <body>
        
<style type="text/css">
.my_bottom1{
    position:fixed;
    bottom:1px;
    height:50px;
    background-color:white;
    line-height:50px;
    max-width:1000px;
    width:100%;
    text-align:center;
}
</style>

<div class="main_head">
    <div style="-webkit-box-flex:1;overflow:hidden;">        
    </div>    
    <div style="-webkit-box-flex:8;overflow:hidden;">
        <input name="keyword" placeholder="输入相关信息" type="text" class="serch_input" />
    </div>
    <div style="-webkit-box-flex:1;" id="Serch">
        <a class="serchlable" ><span style="color:white">搜索</span></a>
    </div>
</div>
<div style="display:-webkit-box;-webkit-box-pack:center;">
    <div class="parent">
        <div class="child2 test">1</div>
        <div class="child2 test">2</div>
        <div class="child2 test">3</div>
    </div>



</div>
<a href="#"><h1>MainPage</h1></a>
<a onclick="scrollfun()">
    <h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3>
    <h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3>
    </a>

<div id="addcontent">
    
</div>
<div class="loadlable">
    <p style="margin:auto"><span style="color:red">正在加载。。。</span></p>
</div>


<script type="text/javascript">
    //手机浏览器自带节流阀，对scroll事件响应要比PC端慢很多。。。
    var i = 1;
    var trigger = true; //滚动开关
    var winH = $(window).height();
    $(window).scroll(scrollfun);//绑定滚动事件


    function scrollfun() {
        if (trigger == false)
            return;
        var pageH = $(document.body).height();
        var pageIH = window.innerHeight;
        var scrollT = $(window).scrollTop(); //滚动条top   
        var doctop = $(document).scrollTop();
        var scrollH = document.body.scrollHeight;
        var aa = (pageH - winH - scrollT) / winH;
        if (scrollH - pageIH - scrollT < 5)
        {
            //alert("触发");
            $(".loadlable").css("display", "block");
            trigger = false;
            getData(i);
        }
        //if (1==1) {//在手机上面 滚动条拉到底也就是0.35，我也不知道为什么  
        //    alert("aa=" + aa + ";IH="+pageIH+";pageH=" + pageH + ";winH=" + winH + ";scrollT=" + scrollT + ";Diff=" + (pageH - winH - scrollT));
           
        //    //$("#loaddiv").css("display", "block");
        //    //trigger = false;
        //    //getData(i);
        //}
    }

    function scrollHandler() {       
        if (trigger == false)
            return;        
        var pageH = $(document.body).height();
        var pageIH = $(document.body).innerHeight();
        var scrollT = $(window).scrollTop(); //滚动条top   
        var aa = (pageH - winH - scrollT) / winH;
        if (aa < 0.4) {//在手机上面 滚动条拉到底也就是0.35，我也不知道为什么  
            alert("aa=" + aa + ";pageH=" + pageH + ";winH=" + winH + ";scrollT=" + scrollT + ";Diff=" + (pageH - winH - scrollT));
            //$("#loaddiv").css("display", "block");
            //trigger = false;
            //getData(i);
        }
    }
    function getData(pagenumber) {
        i++; //页码自动增加，保证下次调用时为新的一页。  
        $.ajax({
            type: "post",
            url: "/MainPage/getData",
            data: {},
            async: true,
            dataType: "json",
            success: function (data) {
                $(".loadlable").css("display", "none");
                var $add = $("#addcontent");
                var html = "<h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3>";
                $add.append(html);
                trigger = true;
            },
            beforeSend: function () {
                //$("#loaddiv").css("display", "block");
                trigger = false;
            },
            error: function () {
                //$("#loaddiv").hide();
                alert("error");
            }
        });

    }

    

    $("#Serch").on("touchstart", function (e) {
        $(this).css("background-color", "rgb(150,0,0)");
    });
    $("#Serch").on("touchend", function (e) {
        $(this).css("background-color", "rgb(250, 77, 77)");
    });
    $(".test").on("touchstart", function (e) {
        $(this).css("background-color", "rgb(150,0,0)");
    });
    $(".test").on("touchend", function (e) {
        $(this).css("background-color", "rgb(250, 77, 77)");
    });
    $(".test").on("click", function (e) {
        $(location).attr('href', 'http://www.baidu.com');
    });



</script>







    </body>
</html>

		自动登录	找回密码
密码			立即注册