js仿QQ中对联系人向左滑动、滑出删除修改按钮的操作

灰太狼 2022-11-10 10:52 190阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>测试</title>
        <style type="text/css">
            * { 
                padding: 0;
                margin: 0;
                list-style: none;
                touch-action: pan-y;
            }
            /*基本样式*/
            .ovh{ 
                overflow: hidden
            }
            .absolute{ 
                position: absolute;
            }
            /*普通样式*/
            .list-li { 
                line-height: 60px;
                border-bottom: 1px solid #fcfcfc;
                padding: 0 12px;
                color: #666;
                position: relative;
                background: #f2f2f2;
                -webkit-transform: translate(0px);
            }
            .btn { 
                top: 0;
                right: -80px;
                text-align: center;
                background: #ffcb20;
                color: #fff;
                width: 80px
            }
            .btn2 { 
                top: 0;
                right: -160px;
                text-align: center;
                background: #ffcb20;
                color: #fff;
                width: 80px
            }
        </style>
    </head>
    <body ontouchstart>
        <ul id="list-ul" class="ovh"></ul>
        <script id="list_tmp" type="text/html">
            { { each lists arr i}}
            <li data-id="li" class="list-li">
                <div class="con">{ { arr.cont}}</div>
                <div class="btn absolute">删除</div>
                <div class="btn2 absolute">修改</div>
            </li>
            { { /each}}
        </script>
    </body>
    </html>
    <script src="./jquery.3.2.1.min.js"></script>
    <script src="./dayjs.min.js"></script>
    <script src="./template.4.12.1.js"></script>
    <script>
    	var lists = [{ 
    			cont: "你的快递到了，请到楼下签收"
    		},
    		{ 
    			cont: "哇，你在干嘛，快点来啊就等你了"
    		},
    		{ 
    			cont: "小区门卫不让上来啊"
    		}
    	]
    	$('#list-ul').html(template('list_tmp', { lists:lists}));
        addLeftSlide("list-li",160);
    /** * 描述：html5苹果手机向左滑动删除特效 * className:需要滑动的节点 * num:向左的位移值。 * */
    function addLeftSlide(className,num){ 
        window.addEventListener('load', function() { 
            var initX; //触摸位置
            var moveX; //滑动时的位置
            var X = 0; //移动距离
            var objX = 0; //目标对象位置
            window.addEventListener('touchstart', function(event) { 
                event.preventDefault();
                var obj = event.target.parentNode;
                //判断触摸对象是否存在当前类
                if(obj.className == className) { 
                    initX = event.targetTouches[0].pageX;
                    objX = (obj.style.WebkitTransform.replace(/translateX$/g, "").replace(/px$/g, "")) * 1;
                }else{ 
                    return false;
                }
                window.addEventListener('touchmove', function(event) { 
                    event.preventDefault();
                    var obj = event.target.parentNode;
                    if(obj.className == className) { 
                        moveX = event.targetTouches[0].pageX;
                        X = moveX - initX;
                        if(objX == 0) {      //translateX为0，没有左滑
                            if(X >= 0) {     //向右滑动正数 (已经在原始位置上右拉，回弹到原始位置)
                                obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                            }else{   //向左移动负数
                                var l = Math.abs(X);
                                obj.style.WebkitTransform = "translateX(" + -l + "px)";
                                if(l > num) {   
                                    l = num;    //最大位移值
                                    obj.style.WebkitTransform = "translateX(" + -l + "px)";
                                }
                            }
                        }else if(objX < 0) {    //translateX为负数，已经左滑了
                            if(X >= 0) { //向右滑动
                                var r = -num + Math.abs(X);
                                console.log(r,"r")
                                obj.style.WebkitTransform = "translateX(" + r + "px)";
                                if(r > 0) { 
                                    r = 0;
                                    obj.style.WebkitTransform = "translateX(" + r + "px)";
                                }
                            }else{  //向左滑动(已经在终点向左滑动)
                                obj.style.WebkitTransform = "translateX(" + -num + "px)";//已obj为对象始终距初始位置-num
                            }
                        }
                    }
                });
            });
            window.addEventListener('touchend', function(event) { 
                event.preventDefault();
                var obj = event.target.parentNode;
                if(obj.className == className) { 
                    objX = (obj.style.WebkitTransform.replace(/translateX$/g, "").replace(/px$/g, "")) * 1;
                    if(objX > -num/2) { //向左滑动负数 如果位移大于位移值/2，那么执行操作(左拉的距离过小回弹到原始位置)
                        obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                        objX = 0;
                    } else {  //左拉距离足够可以执行向左平移
                        obj.style.WebkitTransform = "translateX(" + -num + "px)";
                        objX = -num;
                    }
                }
            });
    	});
    }
    </script>

[https://www.jb51.net/article/82038.htm][https_www.jb51.net_article_82038.htm]  
![在这里插入图片描述][20210319091227384.png_pic_center]

[https_www.jb51.net_article_82038.htm]: https://www.jb51.net/article/82038.htm
[20210319091227384.png_pic_center]: /images/20221022/beffb4dade3a41c6b244693e73192cbf.png