直播商城平台，购物车长按右滑出现删除按钮

<!DOCTYPE html><br><html><br> <br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><br>    <title>js侧滑显示删除按钮</title><br>    <style><br>        * {<br>            margin: 0;<br>            padding: 0;<br>        }<br> <br>        body {<br>            font-size: .14rem;<br>        }<br> <br>        li {<br>            list-style: none;<br>        }<br> <br>        i {<br>            font-style: normal;<br>        }<br> <br>        a {<br>            color: #393939;<br>            text-decoration: none;<br>        }<br> <br>        .list {<br>            overflow: hidden;<br>            margin-top: .2rem;<br>            padding-left: .3rem;<br>            border-top: 1px solid #ddd;<br>        }<br> <br>        .list li {<br>            overflow: hidden;<br>            width: 120%;<br>            border-bottom: 1px solid #ddd;<br>        }<br> <br>        .list li a {<br>            display: block;<br>            height: .88rem;<br>            line-height: .88rem;<br>            -webkit-transition: all 0.3s linear;<br>            transition: all 0.3s linear;<br>        }<br> <br>        .list li i {<br>            float: right;<br>            width: 15%;<br>            text-align: center;<br>            background: #E2421B;<br>            color: #fff;<br>        }<br> <br>        .swipeleft {<br>            transform: translateX(-15%);<br>            -webkit-transform: translateX(-15%);<br>        }<br>    </style><br>    <script><br>        //计算根节点HTML的字体大小<br>        function resizeRoot() {<br>            var deviceWidth = document.documentElement.clientWidth,<br>                num = 750,<br>                num1 = num / 100;<br>            if (deviceWidth > num) {<br>                deviceWidth = num;<br>            }<br>            document.documentElement.style.fontSize = deviceWidth / num1 + "px";<br>        }<br>        //根节点HTML的字体大小初始化<br>        resizeRoot();<br> <br>        window.onresize = function () {<br>            resizeRoot();<br>        };<br>    </script><br></head><br> <br><body><br>    <section><br>        <div class="list"><br>            <ul><br>                <li><a href="#">侧滑显示删除按钮1<i>删除</i></a></li><br>                <li><a href="#">侧滑显示删除按钮2<i>删除</i></a></li><br>                <li><a href="#">侧滑显示删除按钮3<i>删除</i></a></li><br>            </ul><br>        </div><br>        <script><br>            //侧滑显示删除按钮<br>            var expansion = null; //是否存在展开的list<br>            var container = document.querySelectorAll('.list li a');<br>            for (var i = 0; i < container.length; i++) {<br>                var x, y, X, Y, swipeX, swipeY;<br>                container[i].addEventListener('touchstart', function (event) {<br>                    x = event.changedTouches[0].pageX;<br>                    y = event.changedTouches[0].pageY;<br>                    swipeX = true;<br>                    swipeY = true;<br>                    if (expansion) {   //判断是否展开，如果展开则收起<br>                        expansion.className = "";<br>                    }<br>                });<br>                container[i].addEventListener('touchmove', function (event) {<br> <br>                    X = event.changedTouches[0].pageX;<br>                    Y = event.changedTouches[0].pageY;<br>                    // 左右滑动<br>                    if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {<br>                        // 阻止事件冒泡<br>                        event.stopPropagation();<br>                        if (X - x > 10) {   //右滑<br>                            event.preventDefault();<br>                            this.className = "";    //右滑收起<br>                        }<br>                        if (x - X > 10) {   //左滑<br>                            event.preventDefault();<br>                            this.className = "swipeleft";   //左滑展开<br>                            expansion = this;<br>                        }<br>                        swipeY = false;<br>                    }<br>                    // 上下滑动<br>                    if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {<br>                        swipeX = false;<br>                    }<br>                });<br>            }<br>        </script><br></body><br> <br></html>

以上就是直播商城平台，购物车长按右滑出现删除按钮，更多内容欢迎关注之后的文章