在移动端交互场景中，列表项的滑动删除功能能够提升用户的操作效率，通过js脚本结合触摸事件和样式变换可以完整实现这个效果。核心逻辑是监听元素的触摸起始、移动、结束事件，计算滑动距离，根据距离调整元素位置并展示删除按钮，触发删除后移除对应元素。
实现核心思路
整个功能的实现可以分为三个核心步骤：首先是绑定触摸事件，记录用户触摸的起始位置和移动距离；其次是根据移动距离动态修改元素的transform位移属性，同时控制删除按钮的显示状态；最后是处理删除按钮的点击事件，完成元素的移除操作，同时处理滑动边界避免元素位移超出合理范围。
触摸事件监听
需要监听三个触摸事件：touchstart记录初始触摸位置，touchmove计算实时滑动距离，touchend判断滑动结束后的状态，决定是否展示删除按钮或者复位元素。
样式与位移控制
给列表项设置相对定位或者弹性布局，删除按钮默认隐藏在元素右侧，通过修改元素的translateX值让元素向左滑动，露出底部的删除按钮，滑动距离需要设置阈值，避免用户误操作。
完整代码示例
以下是完整的可运行代码，包含HTML结构、CSS样式和js逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js滑动删除示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.list {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
.list-item {
position: relative;
height: 60px;
line-height: 60px;
padding: 0 15px;
background-color: #fff;
border-bottom: 1px solid #eee;
overflow: hidden;
user-select: none;
}
.item-content {
position: relative;
z-index: 2;
height: 100%;
background-color: #fff;
transition: transform 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.delete-btn {
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 80px;
height: 100%;
background-color: #ff4d4f;
color: #fff;
text-align: center;
line-height: 60px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="list">
<div class="list-item">
<div class="item-content">
<span>列表项1</span>
<span>右滑删除</span>
</div>
<div class="delete-btn">删除</div>
</div>
<div class="list-item">
<div class="item-content">
<span>列表项2</span>
<span>右滑删除</span>
</div>
<div class="delete-btn">删除</div>
</div>
<div class="list-item">
<div class="item-content">
<span>列表项3</span>
<span>右滑删除</span>
</div>
<div class="delete-btn">删除</div>
</div>
</div>
<script>
// 获取所有列表项
const listItems = document.querySelectorAll('.list-item');
// 滑动阈值，滑动超过这个距离就显示删除按钮
const THRESHOLD = 50;
// 最大滑动距离，对应删除按钮的宽度
const MAX_SLIDE = 80;
listItems.forEach(item => {
const content = item.querySelector('.item-content');
const deleteBtn = item.querySelector('.delete-btn');
let startX = 0;
let moveX = 0;
let isSlide = false;
// 触摸开始，记录初始位置
item.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
// 如果当前元素已经有滑动，先复位其他元素
listItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.querySelector('.item-content').style.transform = 'translateX(0px)';
}
});
});
// 触摸移动，计算滑动距离
item.addEventListener('touchmove', (e) => {
moveX = e.touches[0].clientX - startX;
// 只允许向左滑动
if (moveX < 0) {
isSlide = true;
// 限制最大滑动距离
const translateX = Math.max(moveX, -MAX_SLIDE);
content.style.transform = `translateX(${translateX}px)`;
}
});
// 触摸结束，判断是否需要显示删除按钮
item.addEventListener('touchend', () => {
if (!isSlide) return;
// 滑动距离超过阈值就完全显示删除按钮
if (Math.abs(moveX) >= THRESHOLD) {
content.style.transform = `translateX(-${MAX_SLIDE}px)`;
} else {
// 否则复位元素
content.style.transform = 'translateX(0px)';
}
isSlide = false;
moveX = 0;
});
// 删除按钮点击事件
deleteBtn.addEventListener('click', () => {
// 添加移除动画
item.style.transition = 'height 0.2s ease, opacity 0.2s ease';
item.style.height = '0';
item.style.opacity = '0';
// 动画结束后移除元素
setTimeout(() => {
item.remove();
}, 200);
});
});
</script>
</body>
</html>
注意事项
- 滑动逻辑中需要限制向左滑动的最大距离，避免元素滑出容器范围，同时防止向右滑动出现不符合预期的效果。
- 当一个列表项滑动出删除按钮时，需要把其他已经滑出的列表项复位，避免多个删除按钮同时显示影响交互体验。
- 如果页面有滚动需求，需要判断滑动方向，避免滑动删除操作和页面滚动冲突，可以在touchmove中判断横向滑动距离是否大于纵向滑动距离，只有横向滑动时才触发删除逻辑。
- 删除元素时可以添加过渡动画，让移除过程更平滑，提升用户体验。
js滑动删除页面元素交互touch事件transform属性修改时间：2026-06-11 20:54:17