JS实现移动端购物车左滑删除功能

最新推荐文章于 2025-03-15 23:23:14 发布

&時光

最新推荐文章于 2025-03-15 23:23:14 发布

阅读量432

点赞数 1

分类专栏： javascript react vue 文章标签： javascript vue.js html reactjs

本文链接：https://blog.youkuaiyun.com/Time_Flies_lei/article/details/116764023

版权

javascript 同时被 3 个专栏收录

38 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

react

20 篇文章

订阅专栏

<!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;
            margin-top: .2rem;
            padding-left: .3rem;
            border-top: 1px solid #ddd;
        }

        .list li {
            overflow: hidden;
            width: 120%;
            border-bottom: 1px solid #ddd;
        }

        .list li a {
            display: block;
            height: .88rem;
            line-height: .88rem;
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .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><a href="#">侧滑显示删除按钮1<i>删除</i></a></li>
                <li><a href="#">侧滑显示删除按钮2<i>删除</i></a></li>
                <li><a href="#">侧滑显示删除按钮3<i>删除</i></a></li>
            </ul>
        </div>
        <script>
            //侧滑显示删除按钮
            var expansion = null; //是否存在展开的list
            var container = document.querySelectorAll('.list li a');
            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;
                    }
                });
            }
        </script>
</body>

</html>