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

　　<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>

　　<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>