纯javascript实现简单下拉刷新功能
代码很简单，实现的功能却很实用，直接奉上代码
CSS：
<metacharset="utf-8"/>
<title>PulltoRefresh</title>
<metaname="viewport"content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/>
<style>
div{
position:absolute;
top:0px;
bottom:0px;
width:100%;
left:0px;
overflow:hidden;
}
li{
list-style-type:none;
height:35px;
background:#ccc;
border-bottom:solid1px#fff;
text-align:left;
line-height:35px;
padding-left:15px;
}
ul{
width:100%;
margin-top:0px;
position:absolute;
left:0px;
padding:0px;
top:0px;
}
</style>
HTML：
<divclass="outerScroller">
<ulclass='scroll'>
<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>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>
</ul>
</div>
<script>
varscroll=document.querySelector('.scroll');
varouterScroller=document.querySelector('.outerScroller');
vartouchStart=0;
vartouchDis=0;
outerScroller.addEventListener('touchstart',function(event){
vartouch=event.targetTouches[0];
//把元素放在手指所在的位置
touchStart=touch.pageY;
console.log(touchStart);
},false);
outerScroller.addEventListener('touchmove',function(event){
vartouch=event.targetTouches[0];
console.log(touch.pageY+'px');
scroll.style.top=scroll.offsetTop+touch.pageY-touchStart+'px';
console.log(scroll.style.top);
touchStart=touch.pageY;
touchDis=touch.pageY-touchStart;
},false);
outerScroller.addEventListener('touchend',function(event){
touchStart=0;
vartop=scroll.offsetTop;
console.log(top);
if(top>70)refresh();
if(top>0){
vartime=setInterval(function(){
scroll.style.top=scroll.offsetTop-2+'px';
if(scroll.offsetTop<=0)clearInterval(time);
},1)
}
},false);
functionrefresh(){
for(vari=10;i>0;i--)
{
varnode=document.createElement("li");
node.innerHTML="I'mnew";
scroll.insertBefore(node,scroll.firstChild);
}
}
</script>
以上就是本文的全部内容了，希望对大家学习javascript能够有所帮助。