滚动条下拉自动刷新
先甩代码，网上的那些例程实测都不可用。只有我这个才可以用测试网址：http://pp.cqyyny.cn/MainPage/MainPage ，用手机测
<!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>
页:
[1]