INTERACTION
滑动删除Swipe to Delete
列表项左滑露出红色删除层，iOS 邮件同款手势。
效果预览
🗑 删除
周五站会纪要已读 · 左滑试试
适合用在哪
移动端列表管理：邮件、待办、购物车、通知。
容易踩的坑
- 滑动是唯一删除入口，键盘、读屏和不熟悉手势的用户根本找不到。
- 没做方向锁，纵向滚动列表时稍有斜移就误拉出删除层。
- 超过阈值直接删除不给撤销，误操作的数据无法找回。
设计提示词 · Prompt
滑动删除（Swipe to Delete）：列表项下层预先放好操作层（红色底 + 删除图标右对齐），上层卡片跟手平移（clamp 到 80px 限位，越拉阻力越大）；松手超过阈值就滑出删除（translateX 到 -100% + 高度塌陷动画），否则弹回。同侧可放两个操作（归档 + 删除）。阈值内松手要有方向感回弹（spring）。桌面 hover 显示操作按钮替代手势。删除后给撤销 Snackbar 兜底。触屏是主场景，务必真机测试边缘情况（列表滚动与滑动手势的方向锁）。
Swipe to Delete: Pre-place an action layer beneath each list item (red background + delete icon right-aligned); the top card follows the finger (clamped to an 80px limit, with increasing resistance the further you pull); releasing past the threshold slides it out and deletes (translateX to -100% + height-collapse animation), otherwise it snaps back. Two actions can share the same side (archive + delete). Releasing within the threshold needs a directional spring snap-back. On desktop, show action buttons on hover instead of the gesture. After deletion, provide an undo Snackbar as a safety net. Touch is the primary scenario — test edge cases on real devices (direction lock between list scrolling and swipe gestures).
常见搭配
同一页面里经常和「滑动删除」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:14px 0">
<div class="d-swipe">
<span class="d-swipe__bg">🗑 删除</span>
<div class="d-swipe__card">周五站会纪要<span class="d-swipe__tag">已读 · 左滑试试</span></div>
</div>
</div>