代码很简单,实现的功能却很实用,直接奉上代码
CSS:
<meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="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: solid 1px #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:
<div class="outerScroller"> <ul class = '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> var scroll = document.querySelector('.scroll'); var outerScroller = document.querySelector('.outerScroller'); var touchStart = 0; var touchDis = 0; outerScroller.addEventListener('touchstart', function(event) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 touchStart = touch.pageY; console.log(touchStart); }, false); outerScroller.addEventListener('touchmove', function(event) { var touch = 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; var top = scroll.offsetTop; console.log(top); if(top>70)refresh(); if(top>0){ var time = setInterval(function(){ scroll.style.top = scroll.offsetTop -2+'px'; if(scroll.offsetTop<=0)clearInterval(time); },1) } }, false); function refresh(){ for(var i = 10;i>0;i--) { var node = document.createElement("li"); node.innerHTML = "I'm new"; scroll.insertBefore(node,scroll.firstChild); } } </script>
以上就是本文的全部内容了,希望对大家学习javascript能够有所帮助。