滑动删除

js部分
var
container = document.querySelectorAll('.shoppingcar li'); 想要滑动的 元素 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; } }); }
.swipeleft {
            transform: translateX(-20%);
            -webkit-transform: translateX(-20%);
        }
原文地址:https://www.cnblogs.com/nns4/p/7570956.html