drop-and-refresh.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--360 浏览器在读取到这个标签后，立即切换对应的极速核-->
    <meta name="renderer" content="webkit">
    <!--优先使用 IE 最新版本和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>下拉刷新</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            height: 30px;
            border-bottom: 1px solid #ddd;
            line-height: 30px;
            padding-left: 10px;
        }

        .scroller .loading {
            height: 60px;
            line-height: 60px;
            text-align: center;
            width: 100%;
            background-color: #f1f1f1;
        }

        .scroller {
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>

<div id="container" class="scroller" >
    <div class="loading">
        下拉刷新数据
    </div>
    <ul>
        <li><a href="#">列表数据1</a></li>
        <li><a href="#">列表数据2</a></li>
        <li><a href="#">列表数据3</a></li>
        <li><a href="#">列表数据4</a></li>
        <li><a href="#">列表数据5</a></li>
        <li><a href="#">列表数据6</a></li>
        <li><a href="#">列表数据7</a></li>
        <li><a href="#">列表数据8</a></li>
        <li><a href="#">列表数据9</a></li>
        <li><a href="#">列表数据10</a></li>
        <li><a href="#">列表数据11</a></li>
        <li><a href="#">列表数据12</a></li>
        <li><a href="#">列表数据13</a></li>
        <li><a href="#">列表数据14</a></li>
        <li><a href="#">列表数据15</a></li>
        <li><a href="#">列表数据16</a></li>
        <li><a href="#">列表数据17</a></li>
        <li><a href="#">列表数据18</a></li>
        <li><a href="#">列表数据19</a></li>
        <li><a href="#">列表数据20</a></li>
        <li><a href="#">列表数据21</a></li>
        <li><a href="#">列表数据22</a></li>
        <li><a href="#">列表数据23</a></li>
        <li><a href="#">列表数据24</a></li>
        <li><a href="#">列表数据25</a></li>
        <li><a href="#">列表数据26</a></li>
        <li><a href="#">列表数据27</a></li>
        <li><a href="#">列表数据28</a></li>
        <li><a href="#">列表数据29</a></li>
        <li><a href="#">列表数据30</a></li>
    </ul>
</div>

</body>
<script src="./ready.js"></script>
<script>
    document.ready(function () {

        var slide = function (option) {
            var defaults={
                container:'',
                next:function(){}
            }
            var start,
                end,
                length,
                isLock = false,//是否锁定整个操作
                isCanDo = false,//是否移动滑块
                isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
                hasTouch = 'ontouchstart' in window && !isTouchPad;
            var obj = document.querySelector(option.container);
            var loading=obj.firstElementChild;
            var offset=loading.clientHeight;
            var objparent = obj.parentElement;
            /*操作方法*/
            var fn =
                {
                    //移动容器
                    translate: function (diff) {
                        obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
                        obj.style.transform='translate3d(0,'+diff+'px,0)';
                    },
                    //设置效果时间
                    setTransition: function (time) {
                        obj.style.webkitTransition='all '+time+'s';
                        obj.style.transition='all '+time+'s';
                    },
                    //返回到初始位置
                    back: function () {
                        fn.translate(0 - offset);
                        //标识操作完成
                        isLock = false;
                    },
                    addEvent:function(element,event_name,event_fn){
                        if (element.addEventListener) {
                            element.addEventListener(event_name, event_fn, false);
                        } else if (element.attachEvent) {
                            element.attachEvent('on' + event_name, event_fn);
                        } else {
                            element['on' + event_name] = event_fn;
                        }
                    }
                };

            fn.translate(0-offset);
            fn.addEvent(obj,'touchstart',start);
            fn.addEvent(obj,'touchmove',move);
            fn.addEvent(obj,'touchend',end);
            fn.addEvent(obj,'mousedown',start)
            fn.addEvent(obj,'mousemove',move)
            fn.addEvent(obj,'mouseup',end)

            //滑动开始
            function start(e) {
                if (objparent.scrollTop <= 0 && !isLock) {
                    var even = typeof event == "undefined" ? e : event;
                    //标识操作进行中
                    isLock = true;
                    isCanDo = true;
                    //保存当前鼠标Y坐标
                    start = hasTouch ? even.touches[0].pageY : even.pageY;
                    //消除滑块动画时间
                    fn.setTransition(0);
                    loading.innerHTML='下拉刷新数据';
                }
                return false;
            }

            //滑动中
            function move(e) {
                if (objparent.scrollTop <= 0 && isCanDo) {
                    var even = typeof event == "undefined" ? e : event;
                    //保存当前鼠标Y坐标
                    end = hasTouch ? even.touches[0].pageY : even.pageY;
                    if (start < end) {
                        even.preventDefault();
                        //消除滑块动画时间
                        fn.setTransition(0);
                        //移动滑块
                        if((end-start-offset)/2<=150) {
                            length=(end - start - offset) / 2;
                            fn.translate(length);
                        }
                        else {
                            length+=0.3;
                            fn.translate(length);
                        }
                    }
                }
            }
            //滑动结束
            function end(e) {
                if (isCanDo) {
                    isCanDo = false;
                    //判断滑动距离是否大于等于指定值
                    if (end - start >= offset) {
                        //设置滑块回弹时间
                        fn.setTransition(1);
                        //保留提示部分
                        fn.translate(0);
                        //执行回调函数
                        loading.innerHTML='正在刷新数据';
                        if (typeof option.next == "function") {
                            option.next.call(fn, e);
                        }
                    } else {
                        //返回初始状态
                        fn.back();
                    }
                }
            }
        }
        slide({container:"#container",next: function (e) {
            //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
            var that = this;
            setTimeout(function () {
                that.back.call();
            }, 2000);
        }});


    });

</script>
</html>