原生js手机端触摸下拉刷新

2018-06-24 00:23:26来源：未知阅读 ()


废话不多说，直接上代码，这里感谢我的好朋友，豆姐

<!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,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<title>下拉刷新</title>
</head>
<style>
div{
width:100%;
overflow:hidden;
}
div ul{
margin:0;
position:absolute;
top:-40px;
left: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>
<!--滑动绑定元素 cont需要定位-->
<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>6</li>
    </ul>
</div>
<!--滑动绑定元素结束-->
<div class="div"></div><!--页面元素-->
<script>
    var _sroll = document.querySelector('.all');
    var outscroll = document.querySelector('.cont');
    var _test = document.querySelector('#test');
    var _star = 0;
    //获取手指最初的位置,添加一个触摸开始的监听事件
    _sroll.addEventListener('touchstart',function(event){
    //获取手指数组中的第一个（可以用targetTouches）
    var _touch = event.touches[0];
        //获取滑动时手指的y坐标+
        _star = _touch.pageY;
    }, false);
    //获取滑动的距离，添加一个触摸滑动的监听事件
    _sroll.addEventListener('touchmove',function(event){
    //获取手指数组中的第一个（可以用targetTouches）
        var _touch = event.touches[0];
        outscroll.style.top = outscroll.offsetTop + _touch.pageY-_star + 'px';
        //获取滑动后手指的y坐标
        _star = _touch.pageY;
        _test.innerHTML = '放开刷新';
    }, false);
    //添加屏幕触摸接触结束的事件
    _sroll.addEventListener('touchend',function(event){
        //初始化手指触摸的y坐标
        _star = 0;
        //获取下拉元素的top值
        var top = outscroll.offsetTop;
        //如果大于40就刷新
        if(top>0){
        //循环慢慢的收缩
        var time = setInterval(function(){
            outscroll.style.top = outscroll.offsetTop -2+'px';
                //如果top等于原始值，停止收缩
                if(outscroll.offsetTop<=-40){
                    clearInterval(time);
                    //刷新页面
                    location.reload();
                }
            },1);
        }
    }, false);
</script>
</body>
</html>