快捷導(dǎo)航

純javascript實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能

更新時(shí)間：2015年03月13日 14:19:13 投稿：hebedich

這篇文章主要介紹了純javascript實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能,沒(méi)有借助任何的框架，十分簡(jiǎn)單實(shí)用，有需要的小伙伴來(lái)參考下吧。

代碼很簡(jiǎn)單，實(shí)現(xiàn)的功能卻很實(shí)用，直接奉上代碼

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：

復(fù)制代碼代碼如下:

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