HTML5JavaScript安卓左滑删除Demo
Html5 和 js 的左滑删除交互，挺适合做移动端的列表优化，尤其是你在做安卓页面或者 Web App 时。这个 Demo 里 Android 和 Web 两种写法都有，对照着看，比较直观。
Android 的 RecyclerView 写法，用的是手势监听配合 item 滑动。思路就是拦截onTouchEvent，再根据滑动距离判断要不要弹出删除按钮。滑得够远就显示，点按钮就删。手感流畅，动画也还不错。
Web 实现部分是用touchstart、touchmove加 CSS3 的transform: translateX做的。触发左滑时，列表项就滑开，露出删除按钮，点一下直接删。整体逻辑比较轻，但也要注意preventDefault()的使用，防止页面跟着乱滚。
它还集成了jQuery Mobile，适配移动端挺方便的，像animate加上transition组合，能做出挺丝滑的效果。不过老问题就是要兼容不同浏览器，像部分安卓机的滑动响应慢点。
哦对了，Demo 里还配了图片和图标资源，UI 也不丑，直接拿来改一改就能用了。如果你在做 ToDo 类 APP、邮件管理、聊天记录之类的功能，这种左滑交互真的顺手。
如果你对微信小程序、HTML5 页面或者Android 列表感兴趣，可以看看这些参考资料：
记得测试下不同机型的手势反馈哦，有时候一点点延迟就会让用户觉得“卡”，体验就掉价了。
文件大小：5.84MB
评论区