移动端实现左滑删除

之前的一个项目，需要实现这么一个功能：左滑出现删除按钮。

当时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文件.

两种方法，各自有各自的优点，根据具体情况使用即可。

转载于:https://www.cnblogs.com/shifan/p/5609469.html