之前的一个项目，需要实现这么一个功能：左滑出现删除按钮。
当时js代码将网上找的进行删减，代码如下：
1 function slideDelete(e) {
2 // 设定每一行的宽度=屏幕宽度+按钮宽度
3 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
4 // 设定常规信息区域宽度=屏幕宽度
5 $(".line-normal-wrapper").width($(".line-wrapper").width());
6 // 设定文字部分宽度（为了实现文字过长时在末尾显示...）
7 //$(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);
8 //设定每个按钮的高度
9 $('.line-btn-delete').each(function(){
10 $(this).css('line-height',$(this.parentNode.parentNode).height()+'px');
11 });
12
13
14 // 获取所有行，对每一行设置监听
15 var lines = $(".line-normal-wrapper");
16
17 var len = lines.length;
18 var lastX, lastXForMobile;
19 // 用于记录被按下的对象
20 var pressedObj; // 当前左滑的对象
21 /*var lastLeftObj; // 上一个左滑的对象*/
22
23 // 用于记录按下的点
24 var start;
25
26 // 网页在移动端运行时的监听
27 for (var i = 0; i < len; ++i) {
28 lines[i].addEventListener('touchstart', function(e){
29 lastXForMobile = e.changedTouches[0].pageX;
30 pressedObj = this; // 记录被按下的对象
31
32 // 记录开始按下时的点
33 var touches = event.touches[0];
34 start = {
35 x: touches.pageX, // 横坐标
36 y: touches.pageY // 纵坐标
37 };
38 });
39
40 lines[i].addEventListener('touchmove',function(e){
41
42 // 计算划动过程中x和y的变化量
43 var touches = event.touches[0];
44 delta = {
45 x: touches.pageX - start.x,
46 y: touches.pageY - start.y
47 };
48
49 // 横向位移大于纵向位移，阻止纵向滚动
50 if (Math.abs(delta.x) > Math.abs(delta.y)) {
51 event.preventDefault();
52 }
53 });
54 lines[i].addEventListener('touchend', function(e){
55 var diffX = e.changedTouches[0].pageX - lastXForMobile;
56 if (diffX < -50) {
57 if($(pressedObj).css('marginLeft') == '0px'){
58 $('.line-normal-wrapper').stop(true,true).animate({marginLeft:"0"},'fast'); //所有归位
59 $(pressedObj).animate({marginLeft:"-132px"},'fast'); // 左滑
60 }
61
62 /* lastLeftObj && lastLeftObj != pressedObj &&
63 $(lastLeftObj).animate({marginLeft:"0"}); // 已经左滑状态的按钮右滑
64 lastLeftObj = pressedObj; // 记录上一个左滑的对象*/
65 } else if (diffX > 50) {
66 $(pressedObj).stop(true,true).animate({marginLeft:"0"}); // 右滑
67 /*lastLeftObj = null; // 清空上一个左滑的对象*/
68 }
69 });
70 }
71
72
73 /* // 网页在PC浏览器中运行时的监听
74 for (var i = 0; i < len; ++i) {
75 $(lines[i]).bind('mousedown', function(e){
76 lastX = e.clientX;
77 pressedObj = this; // 记录被按下的对象
78 });
79
80 $(lines[i]).bind('mouseup', function(e){
81 var diffX = e.clientX - lastX;
82 if (diffX < -150) {
83 $(pressedObj).animate({marginLeft:"-132px"}); // 左滑
84 lastLeftObj && lastLeftObj != pressedObj &&
85 $(lastLeftObj).animate({marginLeft:"0"}); // 已经左滑状态的按钮右滑
86 lastLeftObj = pressedObj; // 记录上一个左滑的对象
87 } else if (diffX > 150) {
88 $(pressedObj).animate({marginLeft:"0"}); // 右滑
89 lastLeftObj = null; // 清空上一个左滑的对象
90 }
91 });
92 }*/
93 };其中注释掉是删减掉了，第九行设置行高，因为需求每个li元素的高度是自己撑开的，不定。如果需要在PC端也实现效果，将注释去掉就可以了。在正常情况下，只需要调用这个函数即可，但因为该页面需要下拉加载，因此触发对象就会出现多次运动。最后，同事帮我在动画里加了58行的stop(),简单粗暴的停止了动画队列。
但是在今天我写完第二种方法之后，发现只是当时的思路不对，因此这里可以改正为：
$(this.parentNode.parentNode).siblings().find('.line-normal-wrapper').animate({marginLeft:"0"},'fast');
将其他行归位的时候，使用siblings()直接将当前元素绕过,就不会出现反复的情况了。
第二种方法，是在学习了jQuery Mobile之后，直接使用swipeleft,swiperight就可以轻松实现。
$(document).on('pagecreate',function(){
$('#page13 .left').on('swipeleft',function(){
$(this).animate({marginLeft:'-120px'});
$(this.parentNode).siblings().find('.left').animate({marginLeft:'0px'});
});
$('#page13 .left').on('swiperight',function(){
$(this).animate({marginLeft:'0px'});
});
$('#page13 .delete').on('tap',function(){
$(this.parentNode).addClass('selected');
});
$('#delete .popup-delete').on('tap',function(){
$('#page13 .selected').remove();
});
$('#delete .popup-cancel').on('tap',function(){
$('#page13 .selected').removeClass('selected');
});
});
这段代码不仅实现了左滑出现删除，右滑复原，并且带有删除效果。没有了上面的各种变量，无疑是非常容易使用并且理解的。实现效果也显得更流畅一些，但是使用它意味着不仅需要加载jQuery，还需要加载jQuery mobile的js和css文件.
两种方法，各自有各自的优点，根据具体情况使用即可。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
