答案：通过监听触摸或鼠标事件判断滑动距离，超过阈值时显示删除按钮并执行删除。具体实现包括：1. 构建列表结构并设置CSS隐藏删除按钮；2. 使用JavaScript记录起始位置，计算滑动偏移量，向左滑动超50px时添加slide类显示删除按钮；3. 点击删除按钮触发移除动画；4. 可扩展支持鼠标事件实现桌面端拖动删除；5. 注意区分滑动方向、优化动画及无障碍访问。核心为事件监听+位移判断+样式控制。
要实现页面元素的滑动删除功能，可以通过监听触摸事件（touchstart、touchmove、touchend）或鼠标事件（mousedown、mousemove、mouseup）来判断用户是否在某个元素上进行横向滑动操作。当滑动距离达到设定阈值时，触发删除动作。以下是具体的实现方法。
1. 基本结构与样式
先构建一个简单的列表结构：
- 内容 1 删除
- 内容 2 删除
添加基础CSS样式，隐藏删除按钮，滑动时显示：
.item {
position: relative;
list-style: none;
padding: 15px;
border-bottom: 1px solid #eee;
background: #fff;
overflow: hidden;
}
.delete-btn {
position: absolute;
top: 0;
right: -60px;
width: 60px;
height: 100%;
background: red;
color: #fff;
text-align: center;
line-height: 48px;
transition: right 0.3s ease;
}
.item.slide > .delete-btn {
right: 0;
}
2. 监听滑动操作
使用JavaScript绑定触摸/鼠标事件，判断滑动方向和距离：
关键步骤：
- 记录触摸起始位置（clientX）
- 监听移动过程，计算偏移量
- 若向左滑动超过阈值（如50px），显示删除按钮
- 点击删除按钮或滑回则隐藏
示例脚本：
document.addEventListener('DOMContentLoaded', function () {
const list = document.getElementById('list');
// 通用事件兼容处理
function addEvent(el, type, fn) {
el.addEventListener(type, fn, false);
}
addEvent(list, 'touchstart', handleTouchStart);
addEvent(list, 'touchmove', handleTouchMove);
addEvent(list, 'touchend', handleTouchEnd);
let startX = 0;
let currentEl = null;
function handleTouchStart(e) {
if (e.target.classList.contains('item') || e.target.parentElement.classList.contains('item')) {
currentEl = e.target.classList.contains('item') ? e.target : e.target.parentElement;
startX = e.touches[0].clientX;
}
}
function handleTouchMove(e) {
if (!currentEl) return;
const moveX = e.touches[0].clientX;
const diff = startX - moveX;
if (diff > 50) {
currentEl.classList.add('slide');
} else if (diff < 10) {
currentEl.classList.remove('slide');
}}
function handleTouchEnd() {
currentEl = null;
}
// 删除按钮点击
addEvent(list, 'click', function (e) {
if (e.target.classList.contains('delete-btn')) {
const item = e.target.parentElement;
item.style.opacity = '0';
setTimeout(() => {
item.remove();
}, 300);
}
});
});
3. 兼容鼠标拖动（可选）
如果希望在桌面端也支持滑动效果，可以同时绑定 mousedown、mousemove、mouseup 事件，逻辑类似，只是事件对象为 mouseEvent 而非 touchEvent。
例如：
addEvent(list, 'mousedown', handleTouchStart);
addEvent(list, 'mousemove', function(e) {
if (!currentEl) return;
// 使用 e.clientX 替代 touches
});
addEvent(list, 'mouseup', handleTouchEnd);
4. 注意事项
优化建议：
- 避免在滚动列表中误触滑动，可通过判断滑动方向（水平 vs 垂直）过滤
- 添加过渡动画使交互更自然
- 移动端注意 preventDefault 的使用时机，防止阻塞正常滚动
- 考虑无障碍访问，提供其他删除方式
基本上就这些，不复杂但容易忽略细节。核心是事件监听 + 位移判断 + 样式控制。根据实际需求调整阈值和动画效果即可。
