<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
//事件：当屏幕发生滚动的时候
window.onscroll=function(){
//距离页面顶部的滚动的距离
var oScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//屏幕的可视高度
var oClientH=document.documentElement.clientHeight;
//body的高度
var oBodyH=document.body.scrollHeight || document.documentElement.scrollHeight;
var disabled=false;
/*disabled用于阻止滚动事件多次触发*/
if(oBodyH - oClientH - oScrollTop <= 200){
/*下拉刷新普通版*/
if(disabled){
return false;
}else{
disabled=true;
alert('刷新数据了哦');
disabled=false;
}
/*下拉刷新ajax版*/
//如果你需要ajax调取接口，需要声明一个变量var disabled=true;
/*ajax({
url:xxx,
data:{
},
success:function(res){
disabled=true;
//把新调取来的数据添加到你需要的数组中即可
disabled=false;
}
})*/
}
}
</script>
</head>
<body>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
<div>Is that the end?</div>
</body>
</html>
网友评论