移动端侧滑删除交互效果
移动端的列表交互里，侧滑删除算是挺常见的一种操作了，像 QQ、微信那种聊天记录，滑一下就能删，挺方便。这个效果用原生 H5 也能实现，而且代码不复杂，响应也快，体验还不错。用到的主要就是几个touch 事件，加上一点CSS 动画。你只要搞懂了滑动的距离判断、动画触发时机，再加点删除逻辑，基本就能搞定。
手指在屏幕上滑一下，就能把某个列表项往左推，露出一个删除按钮。这个交互既节省空间，又操作直观，用户用起来也顺手。整个思路挺简单，touchstart记录初始坐标，touchmove算滑了多远，touchend判断是不是要删。
判断的核心逻辑就是滑动距离，比如设个阈值，滑过 50px 就弹出删除，没滑够就自动回弹。动画方面嘛，transform: translateX()是老朋友了，配上transition搞个平滑效果，看起来舒服，交互更自然。
实际用的时候，也别忘了加点防误触。比如用户刚点了一下列表，别立马删除，可以加个 300ms 延迟判断。还有，列表多了滑动会卡，建议别用太重的 DOM 操作，改数据的时候同步下 DOM 结构，效率高不少。
哦对了，这里有个“懒人原生 H5 页面模拟 APP 侧滑删除效果”的例子，直接就能看代码运行效果，新手照着学也蛮合适。要是你做的是聊天、邮箱、任务类应用，这套交互用上挺加分。
如果你对移动端的触摸交互感兴趣，也可以顺便看看这些相关内容：jQuery 下拉刷新、H5 页面适配这些教程都还不错。
，侧滑删除这个效果，用原生 H5 就能搞定，代码不难，效果也贴近实际需求。用得熟了还能拓展成“标记已读”、“置顶”等功能。如果你最近在做移动端列表 UI，强烈建议你试试。
文件大小：72.39KB
评论区