<!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; //是否存在展开的listvar 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>
