WEB网页，下拉刷新

浏览数：120 / 时间：2015年06月09日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>下拉刷新</title>
<style>
*{
    padding:0;
    margin:0;
}
#header{
    height:40px;
    background:pink;
    text-align: center;
    line-height: 40px;
    position: relative;
    z-index:2;
}
#down_load{
    background:#E67E21;
    -webkit-transition:.3s;
    -webkit-transform:translate3d(0px,0px,0px);
    position: relative;
}
.loading{
    width:100%;
    height:80px;
    position: absolute;
    z-index:-1;
    background:#ddd;
    top:-80px;
    text-align: center;
    line-height:80px;
}
</style>
</head>
<body>
      
  
<header id="header">头部</header>

<section id="down_load">
    <div class="loading">
        <span>↓ 下拉刷新...</span>
    </div>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p><p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</section>

  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    //首先必须的新建一个 data.js 为数据接口，这样获取数据成功之后才能执行动作，简单例子：[{‘title‘:‘aa‘},{‘title‘:‘bb‘},{‘title‘:‘cc‘}]

    function downLoad( id ){
        oDownLoad = document.getElementById(id);
        var startY , offsetY , addNum , timer;

        //开始
        var downLoadStart = function( event ){
            this.startY = event.touches[0].pageY;
        }
        //下拉
        var downLoadMove = function( event ){
            //单只手指操作时才执行
            if ( event.targetTouches.length == 1 ) {
                event.preventDefault();
                this.offsetY = event.targetTouches[0].pageY - this.startY;
                //不让它超出80的范围
                if ( this.offsetY > 80 ) {
                    this.offsetY = 80;
                }else if ( this.offsetY < 0) {
                    this.offsetY = 0;
                }
                oDownLoad.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+this.offsetY+‘px,0px)‘;
                console.log( this.offsetY );
            }
        }
        //结束
        var downLoadEnd = function(){
            //如果大于 80 的数值那么就调用ajax,否则返回
            addNum = 0;
            if ( this.offsetY > 79 ) {
                addNum = 79;
                $.ajax({
                    url:‘data.js‘,
                    type:‘get‘,
                    beforeSend:function(){
                        $(‘.loading span‘).html(‘正在刷新...‘);
                    },
                    success:function(data){
                        addNum = 0;
                        $(‘.loading span‘).html(‘↑刷新成功...‘);
                        oDownLoad.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+addNum+‘px,0px)‘;
                        var data = eval(‘(‘+data+‘)‘);
                        console.log(data);
                        timer = setTimeout(function(){
                            $(‘.loading span‘).html(‘↓ 下拉刷新...‘);
                            clearTimeout(timer);
                        },300);
                    }
                });
            }

            oDownLoad.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+addNum+‘px,0px)‘;
        }

        //监控事件
        oDownLoad.addEventListener(‘touchstart‘ , downLoadStart );
        oDownLoad.addEventListener(‘touchmove‘ , downLoadMove );
        oDownLoad.addEventListener(‘touchend‘ , downLoadEnd);
    }
    downLoad(‘down_load‘);
</script>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

WEB网页，下拉刷新