wap

1.wap下拉刷新丑陋版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>下拉刷新</title>
</head>
<style>
    div{        width:100%;        overflow:hidden;    }
    .p{        height:40px;        position:absolute;        top:-40px;        left:0;    }
    div ul{        margin:0;        width:100%;        padding:0;    }
    div ul li{        list-style-type:none;        text-align:center;        border-bottom:1px solid #999;        line-height:40px;        margin:0;    }
    .div{        height:1000px;        width:100%;        background:#F00;        margin-top:500px;    }
</style>
<body>
    <!--滑动绑定元素-->
    <p class="p">这是刷新的啊</p>
    <div class="all">
        <ul class="cont">
            <li><img src="../refresh/slide-up-down/slide-up-down/2787117_161300358107_1.gif" height="20"></li>
            <li><span id="test">下拉刷新</span></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li id="last">6</li>
        </ul>
    </div>
    <!--滑动绑定元素结束-->
    <div class="div"></div><!--页面元素-->
    <script>
        var _sroll = document.querySelector('.all');
        var outscroll = document.querySelector('.cont');
        var _p =  document.querySelector('.p');
        var _test = document.querySelector('#test');
        var _star = 0;  // 开始位置
        var _second=0;  //第二次位置
        var _move=0;   // 移动的位置
        
        
        _sroll.addEventListener('touchstart',function(event){
            
            var _touch = event.touches[0];
            _star = _touch.pageY;
            console.log("_star: "+_star);
        }, false);
        
        //获取滑动的距离，添加一个触摸滑动的监听事件
        _sroll.addEventListener('touchmove',function(event){
            //获取手指数组中的第一个（可以用targetTouches）
            
            _second=event.touches[0].pageY;
            console.log("_second: "+_second);
            //move 
            
            _move = _second-_star;
            console.log("move: "+_move);
            
            if(_move>0){
                outscroll.style.marginTop=_move+'px';
            }
            if(_move>20){
                _test.innerHTML = '<span style="color:red;">放开刷新</span>'; 
            }
            
        }, false);
        
        //添加屏幕触摸接触结束的事件
        _sroll.addEventListener('touchend',function(event){
            outscroll.style.marginTop="0px";  // 你自己写动画让它慢慢缩回去呗。。。
            setTimeout(function(){
                document.getElementById("last").innerHTML="我刷新了";
            },2000);   // n 秒后 改变页面内容    
        }, false);
        
        
    </script>
</body>
</html>
View Code

 

posted @ 2016-10-25 16:38  gyz418  阅读(325)  评论(0)    收藏  举报