当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现滑动删除功能的实现方法

JS实现滑动删除功能的实现方法

2025-11-06 17:51:47 0浏览收藏

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);