直播商城平臺，購物車長按右滑出現刪除按鈕
<!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>
以上就是直播商城平臺，購物車長按右滑出現刪除按鈕，更多內容歡迎關注之後的文章
直播商城平臺，購物車長按右滑出現刪除按鈕

相關文章
