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

代码很简单，实现的功能却很实用，直接奉上代码

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能够有所帮助。