随着移动端设备的普及，越来越多的网站和应用开始注重移动端的用户体验。其中，滑动删除成为了一种常见的操作方式。本文将会介绍如何使用 HTML 和 CSS 实现滑动删除功能。
首先，需要在 HTML 中设计好需要实现滑动删除功能的列表，例如：
其中，item-content 为列表项的主要内容，item-delete 则是滑动删除时要显示的删除按钮。需要注意的是，item-content 和 item-delete 两个元素需要设置固定宽度，以便在滑动时可以展示全部内容。
接下来，需要使用 CSS 样式对列表项进行设计，包括设置每个列表项的位置、高度、宽度等属性，并且为滑动删除按钮设置样式。可以使用以下代码实现：
ul { list-style: none; padding: 0; margin: 0; } li { position: relative; height: 50px; line-height: 50px; background: #f0f0f0; overflow: hidden; margin-bottom: 10px; border: 1px solid #dcdcdc; } .item-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 60px 0 15px; } .item-delete { position: absolute; top: 0; right: 0; bottom: 0; width: 60px; padding-right: 15px; background: #f44336; color: #fff; text-align: center; } .item-delete button { width: 100%; height: 100%; border: none; background: transparent; color: #fff; font-size: 14px; cursor: pointer; }
上述代码对列表项设置了固定高度、边框、背景色等基本样式，并为 item-content 和 item-delete 两个元素设置了绝对定位。其中，item-content 的 padding-right 设为 60px，而 item-delete 的宽度则设为 60px，并将删除按钮右侧留出 15px 的间隙。
最后，需要使用 JavaScript 代码实现滑动删除功能。具体来说，需要考虑以下几个方面：
以下是具体实现代码：
var startX, moveX, delWidth = 60; var list = document.getElementsByTagName('li'); for (var i = 0; i < list.length; i++) { list[i]._index = i; list[i].addEventListener('touchstart', function(event) { startX = event.touches[0].clientX; moveX = 0; }); list[i].addEventListener('touchmove', function(event) { moveX = event.touches[0].clientX - startX; if (moveX > 0) { this.style.transform = 'translateX(' + moveX + 'px)'; } }); list[i].addEventListener('touchend', function(event) { if (moveX > delWidth / 2) { this.style.transform = 'translateX(' + delWidth + 'px)'; this.querySelector('.item-delete').addEventListener('click', function(event) { var index = event.currentTarget.parentNode.parentNode._index; console.log('delete item: ' + index); // TODO 实现删除操作 }); } else { this.style.transform = 'translateX(0px)'; } }); }
上述代码中，首先将每个列表项单独监听 touchstart、touchmove、touchend 事件，并根据触摸点与滑动距离计算出平移量，使用 transform 实现滑动效果。
在 touchend 事件中，如果滑动距离超过一定阈值，则将列表项平移到 deleteWidth 的位置，并为删除按钮添加点击事件，实现删除操作。
至此，滑动删除功能的实现就完成了。你可以通过以上方法，轻松地在 HTML 和 CSS 中实现滑动删除的效果，优化移动端应用和网站的用户体验，提高用户的满意度。
以上是html 滑动删除的详细内容。更多信息请关注PHP中文网其他相关文章！
