移动端左滑出现删除按钮练习

谁践踏了优雅 2022-06-01 04:11 370阅读 0赞

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

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />  
    <title>Document</title>  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>  
    <style>  
        .contents\{  
            position: relative;  
            height: 4rem;  
            border-bottom: .01rem solid \#ccc;  
            margin-bottom: .2rem;  
            overflow: hidden;  
        \}  
        .w115\{  
            width: 130%;  
              
        \}  
        .package\{  
            height: 4rem;  
            -webkit-transition:all 0.3s linear;  
            transition:all 0.3s linear;  
        \}  
        .lefti\{  
            width: 15%;  
            position: absolute;  
            top: 0;  
            left: 0;  
        \}  
        .leftimg\{  
            display: block;  
            font-style: normal;  
            margin: 1.3rem auto;  
            height: 1.7rem;  
            width: 1.7rem;  
            border: .01rem solid \#435057;  
            background: \#99beee;  
            border-radius: 50%;  
            line-height: 1.7rem;  
            font-size: .13rem;  
            color: \#7a95a3;  
            text-align: center;  
        \}  
        .text\{  
            position: absolute;  
            top: 0;  
            left: 15%;  
            width: 74%;  
            height: 4rem;  
            color: \#7a95a3;  
            font-family: "幼圆";  
            font-size: .22rem;  
            line-height: 4rem;  
        \}  
        .delete\{  
            position: absolute;  
            top: 0;  
            right: -15%;  
            width: 15%;  
            font-size: .22rem;  
            text-align: center;  
            line-height: 4rem;  
            color:\#fff;  
            height: 4rem;  
            background: red;  
            -webkit-transition:all 0.3s linear;  
            transition:all 0.3s linear;  
        \}  
        .swipeleft\{  
            -webkit-transition:all 0.3s linear;  
            transition:all 0.3s linear;  
            transform:translateX(-15%);  
            -webkit-transform:translateX(-15%);  
        \}  
        .swiperight\{  
            -webkit-transition:all 0.3s linear;  
            transition:all 0.3s linear;  
            transform:translateX(0%);  
            -webkit-transform:translateX(0%);  
        \}  
    </style>  
</head>  
<body>  
    <div class="contents ">  
        <div class="package w115">  
            <div class="lefti"><i class="leftimg">左滑</i></div>  
            <div class="text">左滑显示删除按钮左滑显示删除按钮</div>  
            <div class="delete">删除</div>  
        </div>  
    </div>  
    <div class="contents ">  
        <div class="package w115">  
            <div class="lefti"><i class="leftimg">左滑</i></div>  
            <div class="text">左滑显示删除按钮左滑显示删除按钮</div>  
            <div class="delete">删除</div>  
        </div>  
    </div>  
    <div class="contents ">  
        <div class="package w115">  
            <div class="lefti"><i class="leftimg">左滑</i></div>  
            <div class="text">左滑显示删除按钮左滑显示删除按钮</div>  
            <div class="delete">删除</div>  
        </div>  
    </div>  
    <script>  
             var expansion = null; //是否存在展开的contents  
            var container = document.querySelectorAll('.contents .package');//找到所有的左滑盒子  
            for (var index = 0; index < container.length; index++) \{  
                var x, y, X, Y, swipeX, swipeY;  
                //监听左滑盒子的触摸事件  
                container\[index\].addEventListener('touchstart', function (event) \{  
                    //获取触摸点的坐标targetTouches\[0\].pageX,Y   
                    x = event.changedTouches\[0\].pageX;  
                    y = event.changedTouches\[0\].pageY;  
                    swipeX = true;  
                    swipeY = true;  
                    if (expansion) \{  
                        //判断是否展开，如果展开则收起  
                        expansion.className = "swiperight";  
                    \}  
                \});  
                //监听左滑盒子的屏幕上滑动事件 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。  
                container\[index\].addEventListener('touchmove', function (event) \{  
                    X = event.changedTouches\[0\].pageX;  
                    Y = event.changedTouches\[0\].pageY;  
                    //console.log(X,Y);  
                    //判断左右滑动  
                    if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) \{  
                        // 阻止事件冒泡  
                        event.stopPropagation();  
                        if (X - x > 10)\{   //右滑  
                            event.preventDefault();  // 取消事件的默认动作  
                            this.className = "swiperight";   
                        \}  
                        if (x - X > 10) \{   //左滑  
                            event.preventDefault();  
                            this.className = "swipeleft";   //左滑展开  
                            expansion = this;  
                        \}  
                        swipeY = false;  
                    \}  
                    // 上下滑动  
                    if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) \{  
                        swipeX = false;  
                    \}  
                \})  
            \}  
    </script>  
</body>  
</html>

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