移动端实现左滑删除
之前的一个项目，需要实现这么一个功能：左滑出现删除按钮。
当时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文件.
两种方法，各自有各自的优点，根据具体情况使用即可。
