<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
padding:0;
font-size: 3rem;
}
</style>
</head>
<body>
<div style='height:0;width:500px;text-align:center;position: relative;' class='xl'><span style='position: absolute;bottom: 10px;'>↓下拉更新</span></div>
<div class='app' style='width:500px;height:500px;background: lightblue'></div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
var S={
xiala:function(e,fn){
var dist=0;window.val=0;
e.on('touchstart',function(e){
dist=e.touches[0].pageY;
})
e.on('touchmove',function(e){
val=Math.abs(e.touches[0].pageY-dist);
// console.log(val);
if(val>250){
$('.xl span').text('↑释放更新')
}
$('.xl').css('height',val);
})
e.on('touchend',function(e){
$('.xl').css('transition','height 500ms')
$('.xl').css('height','200px');
})
$('.xl').on('webkitTransitionEnd',function(){
$('.xl').css('transition','height 0ms ')
$('.xl span').text('↓下拉更新')
fn&&fn();
$('.xl').animate({height:'0'})
})
}
}
S.xiala($('.app'),function(){alert(2)})
</script>
</html>
下拉的显示的div，最好是写进方法里，prepend()插入头部，这里就不写了。
网友评论