手机端左滑显示删除

最新推荐文章于 2024-07-25 11:52:08 发布

EstherNi

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量114

点赞数

文章标签： html pdf javascript

本文链接：https://blog.csdn.net/EstherNi/article/details/131344658

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>js侧滑显示删除按钮</title>
    <style>
        *{margin:0;padding:0;}
        body{font-size:.14rem;}
        li{list-style:none;}
        i{font-style:normal;}
        a{color:#393939;text-decoration:none;}
        .list{overflow:hidden;padding-left:.3rem;}
        .list li{width:120%;border-bottom:1px solid #ddd;}
        .list li p{overflow:hidden;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
        .list li a{display:inline-block;width:85%;}
        .list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
        .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
    </style>
    <script>
        //计算根节点HTML的字体大小
        function resizeRoot(){
            var deviceWidth = document.documentElement.clientWidth,
                num = 750,
                num1 = num / 100;
            if(deviceWidth > num){
                deviceWidth = num;
            }
            document.documentElement.style.fontSize = deviceWidth / num1 + "px";
        }
        //根节点HTML的字体大小初始化
        resizeRoot();

        window.onresize = function(){
            resizeRoot();
        };
    </script>
</head>
<body>
<section>
    <div class="list">
        <ul>
            <li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>
            <li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>
            <li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>
        </ul>
    </div>
    <script>
        //侧滑显示删除按钮
        var expansion = null; //是否存在展开的list
        var container = document.querySelectorAll('.list li p');
        for(var i = 0; i < container.length; i++){
            var x, y, X, Y, swipeX, swipeY;
            container[i].addEventListener('touchstart', function(event) {
                x = event.changedTouches[0].pageX;
                y = event.changedTouches[0].pageY;
                swipeX = true;
                swipeY = true ;
                if(expansion){   //判断是否展开，如果展开则收起
                    expansion.className = "";
                }
            });
            container[i].addEventListener('touchmove', function(event){
                X = event.changedTouches[0].pageX;
                Y = event.changedTouches[0].pageY;
                // 左右滑动
                if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
                    // 阻止事件冒泡
                    event.stopPropagation();
                    if(X - x > 10){   //右滑
                        event.preventDefault();
                        this.className = "";    //右滑收起
                    }
                    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;
                }
            });
        }

        var i = document.querySelectorAll('.list li i');
        i.forEach(function(item, index){
            i[index].onclick = function(){
                this.parentNode.parentNode.remove();
            };
        });
    </script>
</body>
</html>