纯javascript实现简单下拉刷新功能_javascript技巧

<script><br /> var scroll = document.querySelector('.scroll');<br /> var outerScroller = document.querySelector('.outerScroller');<br /> var touchStart = 0;<br /> var touchDis = 0;<br /> outerScroller.addEventListener('touchstart', function(event) { <br /> var touch = event.targetTouches[0]; <br /> // 把元素放在手指所在的位置 <br /> touchStart = touch.pageY; <br /> console.log(touchStart);<br /> }, false);<br /> outerScroller.addEventListener('touchmove', function(event) { <br /> var touch = event.targetTouches[0]; <br /> console.log(touch.pageY + 'px'); <br /> scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';<br /> console.log(scroll.style.top);<br /> touchStart = touch.pageY;<br /> touchDis = touch.pageY-touchStart;<br /> }, false);<br /> outerScroller.addEventListener('touchend', function(event) { <br /> touchStart = 0;<br /> var top = scroll.offsetTop;<br /> console.log(top);<br /> if(top>70)refresh();<br /> if(top>0){<br /> var time = setInterval(function(){<br /> scroll.style.top = scroll.offsetTop -2+'px';<br /> if(scroll.offsetTop<=0)clearInterval(time);<br /> },1)<br /> }<br /> }, false);<br /> function refresh(){<br /> for(var i = 10;i>0;i--)<br /> {<br /> var node = document.createElement("li");<br /> node.innerHTML = "I'm new";<br /> scroll.insertBefore(node,scroll.firstChild);<br /> }<br /> }<br /> </script>