移动端下拉刷新练习

比眉伴天荒 2022-06-01 06:05 157阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>下拉刷新</title>
        <style>
            /* 小圆开始 */
        *{
             margin: 0; padding: 0;
        }
        .bag{
            transform: translate(0,-2.5rem);
        }
        .fl{
            float: left;
        }
        .tex{
            line-height: 2rem;
            text-align: center;
            margin-left: 5%;
        }
        .hidden{
            height: 2rem;
        }
        .wrap{
            position: relative;
            width: 1.5rem;
            height: 1.5rem;
            margin-top: 0.3rem;
            margin-left: 30%;
        }
        .circle{
            height: 100%;
            box-sizing: border-box;
            border: .1rem solid #777778;
            border-radius: 50%;
        }
        .circle:before{
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 50%;
            box-sizing: border-box;
            top: 50%;
            left: 0;
            border: .03rem solid #777778;
            border-top: transparent;
            border-radius:  0 0 50% 50%/ 0 0 100% 100%;
            z-index: 2;
        }
        .topa, .bottom{
            position: absolute;
            left: 0;
            width: 100%;
            height: 60%;
            box-sizing: border-box;
            background: #fff;
        }
        .topa{
            top: 0;
            z-index: 1;
            transform-origin: center bottom;
            -webkit-animation-fill-mode:both;
            /* animation: 1s back-half linear 1s infinite;   infinite 为无限循环 */
            animation: 1s back-half linear .9s ;
            animation-fill-mode:both;
        }
        .bottom{
            z-index: 3;
            top: 50%;
            transform-origin: center top;
            -webkit-animation-fill-mode:both;
            animation: .9s front-half linear ;
            animation-fill-mode:both;
        }
        @keyframes front-half{
            0%{
                transform: rotate( 0 );
            }
            99%{
                transform: rotate( 180deg );
                opacity: 1;
            }
            100%{
                transform: rotate( 180deg );
                opacity: 0;
            }
        }
        @keyframes back-half{
            0%{
            transform: rotate(0);
            }
            99%{
            transform: rotate( 180deg );
            opacity: 1;
            }
            100%{
                transform: rotate( 180deg );
                opacity: 0;
            }
        }
        /* 小圆结束 */
        .content{
            margin-top:.5rem; 
        }
        .content .box1{
            width: 100%;
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            background: skyblue;
        }
        </style>
    </head>
    <body>
        <div class="bag">
            <div class="hidden">
                
                <div class="wrap fl">
                    <div class="circle"></div>
                    <div class="topa"></div>
                    <div class="bottom"></div>
                </div>
                
                <span class="fl tex">正在加载中..</span>
            </div>
            <div class="content">
                <div class="box1">这是第一个盒子</div>
                <div class="box1">这是第二个盒子</div>
                <div class="box1">这是第三个盒子</div>
                <div class="box1">这是第四个盒子</div>
                <div class="box1">这是第五个盒子</div>
                <div class="box1">这是第六个盒子</div>
                <div class="box1">这是第七个盒子</div>
                <div class="box1">这是第八个盒子</div>
                <div class="box1">这是第一个盒子</div>
                <div class="box1">这是第二个盒子</div>
                <div class="box1">这是第三个盒子</div>
                <div class="box1">这是第四个盒子</div>
                <div class="box1">这是第五个盒子</div>
                <div class="box1">这是第六个盒子</div>
                <div class="box1">这是第七个盒子</div>
                <div class="box1">这是第八个盒子</div>
                <div class="box1">这是第一个盒子</div>
                <div class="box1">这是第二个盒子</div>
                <div class="box1">这是第三个盒子</div>
                <div class="box1">这是第四个盒子</div>
                <div class="box1">这是第五个盒子</div>
                <div class="box1">这是第六个盒子</div>
                <div class="box1">这是第七个盒子</div>
                <div class="box1">这是第八个盒子</div>
            </div>
        </div>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        <script>
            var slide = function(obj,offset,callback){
                var start,
                    end,
                    isLock = false,//是否锁定整个操作
                    isCanDo = false,//是否移动滑块
                    isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),//验证客户端的设备类型
                    hasTouch = 'ontouchstart' in window && !isTouchPad;//手机浏览器中的事件。
                    //将对象转换为jquery的对象
                    obj = $(obj);
                    var objparent = obj.parent();
    
                    //判断滑动事件是否在指定高度内， 否则页面上滑至第二页再次下拉还是能触发下拉时间
                    function noo(mouseY) {
                    var bodyheight = $(window).height();
                    if (mouseY != null) {
                        //end = null;
                        if (mouseY > bodyheight) {
                            return false;
                        }
                        else {
                            return true;
                            if (mouseY > bodyheight/2) {
                                obj.touchend();
                            }
                        }
    
                    }
                    else {
    
                        return true;
                    }
                }
                    var fn = 
                    {
                        //移动容器 translate 为画布的变换矩阵添加水平的和垂直的偏移
                        translate:function(distance){
                            obj.css({
                                "-webkit-transform": "translate(0," + distance + "px)",
                                "transform": "translate(0," + distance + "px)"
                            })
                        },
                        //设置效果时间
                        setTranslition: function (time) {
                            obj.css({
                                "-webkit-transition": "all " + time + "s",
                                "transition": "all " + time + "s"
                            });
                        },
                        //返回到初始位置
                        back: function () {
                            fn.translate(0 - offset);
                            console.log(offset);
                            //标识操作完成
                            isLock = false;
                        }
    
                    }
                //滑动开始
                obj.bind("touchstart", function (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
                        fn.setTranslition(0);
                    }
                     //滑动中
                obj.bind("touchmove", function (e) {
                    if (objparent.scrollTop() <= 0 && isCanDo) {
                        //console.log(objparent.scrollTop());
                        var even = typeof event == "undefined" ? e : event;
                        //保存当前鼠标Y坐标 touches[0].pageY在手机上点的Y轴位置 event.touches，多点触碰时的位置数组，比如缩放手势必须要用两指的触摸点，就是一个数组
                        end = hasTouch ? even.touches[0].pageY : even.pageY;
                        var checkMove = noo(end);
                        if(checkMove){
                             if (start < end) {
                                //event.preventDefault()该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
                                even.preventDefault();
                                //消除滑块动画时间
                                fn.setTranslition(0);
                                //移动滑块
                                fn.translate(end - start - offset);
                            }
                        }
                     }
                 });
                  //滑动结束
                obj.bind("touchend", function (e) {
                    if (isCanDo) {
                        isCanDo = false;
                        //判断滑动距离是否大于等于指定值
                        if (end - start >= offset) {
                            //设置滑块回弹时间
                            fn.setTranslition(1);
                            //保留提示部分
                            fn.translate(0);
                            //执行回调函数
                            if (typeof callback == "function") {
                                callback.call(fn, e);
                            }
                        } else {
                            //返回初始状态
                            fn.back();
                            /* 这里可添加 ajax 、刷新事件 等 */
                        }
                    }
                });
            });
                    
        }
        $(function () {
                //slide 滑块
                slide(".bag", 45, function (e) {
                    var that = this;
                    setTimeout(function () {
                        that.back.call();
                    }, 1000)
                });
            });
        
        </script>
    </body>
    </html>

![SouthEast][] ![SouthEast 1][]

[SouthEast]: https://img-blog.csdn.net/20180122153403841?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDE2NDg0NTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220601/6ddfbc2729f846c38c9b6de40c568ee7.png