<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
position: relative;
}
ul li{
background-color: #eee;
border-bottom: 1px solid black;
text-align: center;
line-height: 60px;
list-style: none;
}
p{
text-align: center;
line-height: 65px;
position: absolute;
font-size: 18px;
width: 100%;
height: 65px;
}
#msg{
position: fixed;
top: 0;
width: 300px;
height: 30px;
background-color: rgb(37, 92, 92);
color: white;
z-index: 100;
line-height: 28px;
border-radius: 6px;
border: 1px solid white;
border-top: none;
transform: translateX(-50%);
left: 50%;
opacity: 0;
}
</style>
</head>
<body>
<div id="box">
<p id="msg"></p>
<P id="title"></P>
<ul id="ul">
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li>
<li>第9行</li>
<li>第10行</li>
<li>第11行</li>
<li>第12行</li>
<li>第13行</li>
<li>第14行</li>
</ul>
</div>
<p id="footer">上拉加载更多</p>
<script src="jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var ele=document.getElementById('ul'),
title=document.getElementById('title'),
footer=document.getElementById('footer'),
touchStart=0,
touchMove=0;
var num=15;
var isRef='';
var foisRef='';
ele.addEventListener('touchstart',function(e){
touchStart=Math.floor(e.touches[0].pageY);
ele.style.position = 'relative';
ele.style.transition='transform 0s';
// console.log(touchStart)
},false)
ele.addEventListener('touchmove',function(e){
touchMove=Math.floor(e.touches[0].pageY)-touchStart;
// 上拉控制
if(touchMove<=0&&touchMove>-200){
if(touchMove<-60){
foisRef=true;
}
// console.log(touchMove)
ele.style.transform='translateY('+touchMove+'px)';
if(touchMove<-60){
footer.innerText='释放加载。。。。'
}
}
// 下拉控制
if(touchMove>0&&touchMove<150){
if(touchMove>50){
isRef=true;
}
title.innerText='下拉刷新'
ele.style.transform='translateY('+touchMove+'px)';
if(touchMove>100){
title.innerText='释放刷新'
}
}
},false)
ele.addEventListener('touchend',function(e){
ele.style.transition='transform 0.5s ease 1s';
ele.style.transform='translateY(0)';
if(isRef){
title.innerText='更新中。。。。';
}else if(foisRef){
footer.innerText='更新中........'
}
setTimeout(function(){
// 下拉控制
if(isRef){
for(let i=0,len=3;i<len;i++){
$('#ul').prepend('<li>第'+num+'</li>')
num++
}
showTip().show
showTip().hide
}
// 上拉控制
if(foisRef){
for(let i=0,len=3;i<len;i++){
$('#ul').append('<li>第'+num+'行</li>')
num++
}
footer.innerText='上拉加载更多';
showTip().show
showTip().hide
}
foisRef=false;
isRef=false;
},2000)
},false)
var showTip=()=>{
var obj={
show:$('#msg').animate({opacity:'1'},2000)
.html('为您加载<i> 3 </i>条内容'),
// console.log($('#msg'))
hide:setTimeout(() => {
$('#msg').animate({opacity:'0'},'slow');
}, 1000)
}
return obj
}
}
</script>
</body>
</html>