<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>下拉刷新</title>
<style>
*{
padding:0;
margin:0;
}
#header{
height:40px;
background:pink;
text-align: center;
line-height: 40px;
position: relative;
z-index:2;
}
#down_load{
background:#E67E21;
-webkit-transition:.3s;
-webkit-transform:translate3d(0px,0px,0px);
position: relative;
}
.loading{
width:100%;
height:80px;
position: absolute;
z-index:-1;
background:#ddd;
top:-80px;
text-align: center;
line-height:80px;
}
</style>
</head>
<body>
<header id="header">头部</header>
<section id="down_load">
<div class="loading">
<span>↓ 下拉刷新...</span>
</div>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p><p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</section>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
//首先必须的新建一个 data.js 为数据接口，这样获取数据成功之后才能执行动作，简单例子：[{‘title‘:‘aa‘},{‘title‘:‘bb‘},{‘title‘:‘cc‘}]
function downLoad( id ){
oDownLoad = document.getElementById(id);
var startY , offsetY , addNum , timer;
//开始
var downLoadStart = function( event ){
this.startY = event.touches[0].pageY;
}
//下拉
var downLoadMove = function( event ){
//单只手指操作时才执行
if ( event.targetTouches.length == 1 ) {
event.preventDefault();
this.offsetY = event.targetTouches[0].pageY - this.startY;
//不让它超出80的范围
if ( this.offsetY > 80 ) {
this.offsetY = 80;
}else if ( this.offsetY < 0) {
this.offsetY = 0;
}
oDownLoad.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+this.offsetY+‘px,0px)‘;
console.log( this.offsetY );
}
}
//结束
var downLoadEnd = function(){
//如果大于 80 的数值那么就调用ajax,否则返回
addNum = 0;
if ( this.offsetY > 79 ) {
addNum = 79;
$.ajax({
url:‘data.js‘,
type:‘get‘,
beforeSend:function(){
$(‘.loading span‘).html(‘正在刷新...‘);
},
success:function(data){
addNum = 0;
$(‘.loading span‘).html(‘↑刷新成功...‘);
oDownLoad.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+addNum+‘px,0px)‘;
var data = eval(‘(‘+data+‘)‘);
console.log(data);
timer = setTimeout(function(){
$(‘.loading span‘).html(‘↓ 下拉刷新...‘);
clearTimeout(timer);
},300);
}
});
}
oDownLoad.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+addNum+‘px,0px)‘;
}
//监控事件
oDownLoad.addEventListener(‘touchstart‘ , downLoadStart );
oDownLoad.addEventListener(‘touchmove‘ , downLoadMove );
oDownLoad.addEventListener(‘touchend‘ , downLoadEnd);
}
downLoad(‘down_load‘);
</script>
</body>
</html>
时间： 2024-10-12 03:35:23