基于jQuery的左滑出现删除按钮

最近在做项目的时候遇到了个需求，在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果，于是尝试着写了一个，写出来与大家交流分享，大神勿喷。

基本要求

由于我们是在做一个跨平台的APP，里面部分界面其实就是WebView加载的网页，因此需要使用网页实现这样的效果：往左滑动时，显示删除按钮，再往右滑，隐藏删除按钮。

成品示例图

额，先上图吧。下面分别是在PC浏览器里和在Mobile浏览器里的效果。

PC浏览器

/>div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">蜡笔小新div> <div class="line-normal-msg">在同行的小伙伴中提到了你div> <div class="line-normal-time">1分钟前div> div> div> <div class="line-normal-icon-wrapper"><img src="5.jpg"/>div> div> <div class="line-btn-delete"><button>删除button>div> div> div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="2.jpg" />div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">乔巴div> <div class="line-normal-msg">你看不到我哦div> <div class="line-normal-time">1分钟前div> div> div> <div class="line-normal-icon-wrapper"><img src="6.jpg"/>div> div> <div class="line-btn-delete"><button>删除button>div> div> div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="3.jpg" />div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">贱行贱远div> <div class="line-normal-msg">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头div> <div class="line-normal-time">1分钟前div> div> div> <div class="line-normal-icon-wrapper"><img src="7.jpg"/>div> div> <div class="line-btn-delete"><button>删除button>div> div> div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="4.png" />div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">小黄人div> <div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……div> <div class="line-normal-time">1分钟前div> div> div> <div class="line-normal-icon-wrapper"><img src="8.jpg"/>div> div> <div class="line-btn-delete"><button>删除button>div> div> div> body> html>

总结

代码还比较粗糙，存在很多bug，也有些地方不是那么绝对。比如当我按下时是在第一条记录，然后抬起时是在第二条记录，那么这时候滑动将是第一条记录。但是这个看具体需求了，如果你觉得滑动的对象应该以按下去时的对象为准的话，那就不管在哪抬起都滑动那个按下时的对象；如果你觉得滑动的对象应该是抬起时的对象，那也没问题，或者你觉得按下和抬起时不是同一个对象就不滑动任何对象那也行。总之，看需求。

大家可以下载源码试一试哈~

源码请戳：源码下载

---

// 个人学习记录，大神勿喷
// sfg1991@163.com
// 2015/6/5
// 最后更新 2016/9/6