您的位置:首页 - 教程 - JavaScript - 正文
写一个js向左滑动删除 交互特效的插件——Html5 touchmove
请使用触屏手机等打开效果页面体验效果。

效果1:
http://hovertree.com/texiao/mobile/8/

hewenqi插件效果:
http://hovertree.com/texiao/hewenqi/

需求描述

需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮。滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处。
插件名称为 hewenqi

 

纯js实现

使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
  <title>html5向左滑动删除特效-何问起</title>
  <style>
  * {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  header {
    background: #f7483b;
    border-bottom: 1px solid #ccc
  }
  
  header h2 {
    text-align: center;
    line-height: 54px;
    font-size: 16px;
    color: #fff
  }
  
  .list-ul {
    overflow: hidden
  }
  
  .list-li {
    line-height: 60px;
    border-bottom: 1px solid #fcfcfc;
    position: relative;
    padding: 0 12px;
    color: #666;
    background: #f2f2f2;
    -webkit-transform: translateX(0px);
  }
  
  .btn {
    position: absolute;
    top: 0;
    right: -80px;
    text-align: center;
    background: #ffcb20;
    color: #fff;
    width: 80px
  }
  </style>
  <script>
  /*
   * 描述:html5苹果手机向左滑动删除特效
   */
  window.addEventListener('load', function() {
    var initX; //触摸位置
    var moveX; //滑动时的位置
    var X = 0; //移动距离
    var objX = 0; //目标对象位置
    window.addEventListener('touchstart', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        initX = event.targetTouches[0].pageX;
        objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
      }
      if (objX == 0) {
        window.addEventListener('touchmove', function(event) {
          event.preventDefault();
          var obj = event.target.parentNode;
          if (obj.className == "list-li") {
            moveX = event.targetTouches[0].pageX;
            X = moveX - initX;
            if (X >= 0) {
              obj.style.WebkitTransform = "translateX(" + 0 + "px)";
            } else if (X < 0) {
              var l = Math.abs(X);
              obj.style.WebkitTransform = "translateX(" + -l + "px)";
              if (l > 80) {
                l = 80;
                obj.style.WebkitTransform = "translateX(" + -l + "px)";
              }
            }
          }
        });
      } else if (objX < 0) {
        window.addEventListener('touchmove', function(event) {
          event.preventDefault();
          var obj = event.target.parentNode;
          if (obj.className == "list-li") {
            moveX = event.targetTouches[0].pageX;
            X = moveX - initX;
            if (X >= 0) {
              var r = -80 + Math.abs(X);
              obj.style.WebkitTransform = "translateX(" + r + "px)";
              if (r > 0) {
                r = 0;
                obj.style.WebkitTransform = "translateX(" + r + "px)";
              }
            } else { //向左滑动
              obj.style.WebkitTransform = "translateX(" + -80 + "px)";
            }
          }
        });
      }

    })
    window.addEventListener('touchend', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
        if (objX > -40) {
          obj.style.WebkitTransform = "translateX(" + 0 + "px)";
          objX = 0;
        } else {
          obj.style.WebkitTransform = "translateX(" + -80 + "px)";
          objX = -80;
        }
      }
    })
  })
  </script>
</head>

<body>
  <header>
    <h2>消息列表</h2>
  </header>
  <section class="list">
    <ul class="list-ul">
      <li id="li" class="list-li">
        <div class="con">
          你的快递到了,请到楼下签收
        </div>
        <div class="btn">删除</div>
      </li>
      <li class="list-li">
        <div class="con">
          哇,你在干嘛,快点来啊就等你了
        </div>
        <div class="btn">删除</div>
      </li>
    </ul>
  </section>
</body>

</html>

 

 

做成Hewenqi插件

实际项目中,我们可能有很多个地方会用到这个功能。现在我们将这个功能做成hewenqi插件,方便后面使用。

这个插件,我们仅实现这个功能,然后传入参数(删除按钮的样式名),让程序在js中计算所需要滑动的距离,方便复用。

hewenqi插件展示:http://hovertree.com/texiao/hewenqi/

zepto.touchWipe.js

 /**
  * zepto插件:向左滑动删除动效
  * 使用方法:$('.itemWipe').touchWipe({itemDelete: '.item-delete'});
  * 参数:itemDelete  删除按钮的样式名
  */
 ;
 (function($) {
   $.fn.touchWipe = function(option) {
     var defaults = {
       itemDelete: '.item-delete', //删除元素
     };
     var opts = $.extend({}, defaults, option); //配置选项
 
     var delWidth = $(opts.itemDelete).width();
 
     var initX; //触摸位置
     var moveX; //滑动时的位置
     var X = 0; //移动距离
     var objX = 0; //目标对象位置
     $(this).on('touchstart', function(event) {
       event.preventDefault();
       var obj = this;
       initX = event.targetTouches[0].pageX;
       objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
       if (objX == 0) {
         $(this).on('touchmove', function(event) {
           event.preventDefault();
           var obj = this;
           moveX = event.targetTouches[0].pageX;
           X = moveX - initX;
           if (X >= 0) {
             obj.style.WebkitTransform = "translateX(" + 0 + "px)";
           } else if (X < 0) {
             var l = Math.abs(X);
             obj.style.WebkitTransform = "translateX(" + -l + "px)";
             if (l > delWidth) {
               l = delWidth;
               obj.style.WebkitTransform = "translateX(" + -l + "px)";
             }
           }
         });
       } else if (objX < 0) {
         $(this).on('touchmove', function(event) {
           event.preventDefault();
           var obj = this;
           moveX = event.targetTouches[0].pageX;
           X = moveX - initX;
           if (X >= 0) {
             var r = -delWidth + Math.abs(X);
             obj.style.WebkitTransform = "translateX(" + r + "px)";
             if (r > 0) {
               r = 0;
               obj.style.WebkitTransform = "translateX(" + r + "px)";
             }
           } else { //向左滑动
             obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
           }
         });
       }
 
     })
     $(this).on('touchend', function(event) {
       event.preventDefault();
       var obj = this;
       objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
       if (objX > -delWidth / 2) {
         obj.style.transition = "all 0.2s";
         obj.style.WebkitTransform = "translateX(" + 0 + "px)";
         obj.style.transition = "all 0";
         objX = 0;
       } else {
         obj.style.transition = "all 0.2s";
         obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
         obj.style.transition = "all 0";
         objX = -delWidth;
       }
     })
 
     //链式返回
     return this;
   };
 
 })(Zepto);

 

touchWipe.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
 <title>html5向左滑动删除特效-何问起</title>
 
 <style>
     *{ padding:0; margin:0; list-style: none;}
     header{ background: #f7483b; border-bottom: 1px solid #ccc}
     header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff}
     .list-ul{ overflow: hidden}
     .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666;
         background: #f2f2f2;
         -webkit-transform: translateX(0px);
     }
     .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px}
 </style>
 
 </head>
 <body>
 <header>
     <h2>消息列表</h2>
 </header>
 <section class="list">
     <ul class="list-ul">
         <li id="li" class="list-li">
             <div class="con">
                 你的快递到了,请到楼下签收
             </div>
             <div class="btn">删除</div>
         </li>
         <li class="list-li">
             <div class="con">
                 哇,你在干嘛,快点来啊就等你了
             </div>
             <div class="btn">删除</div>
         </li>
     </ul>
 </section>
 
 <p>X: <span id="X"></span></p>
 <p>objX: <span id="objX"></span></p>
 <p>initX: <span id="initX"></span></p>
 <p>moveX: <span id="moveX"></span></p>
 
 <script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
 <script type="text/javascript" src="zepto.touchWipe.js"></script>
 <script type="text/javascript">
     $(function() {
     $('.list-li').touchWipe({itemDelete: '.btn'});
     });
 
 </script>
 </body>
 </html>

 

效果:

 

实际项目中的应用效果:

 

消除BUG

到上面一步,基本实现了我们所需要的功能。但是有几个问题

1. 右边的删除按钮点击失灵,因为span无法冒泡到大按钮上;

2. 非常严重的问题,我们给div添加了touchmove事件同时用preventDefault()屏蔽了原始的浏览器事件,导致上下滑动div的时候 页面无法滚动了!

 

第一个问题比较容易解决,我们把span直接去掉,将“删除”写到css中的:before里,像这样:

.itemWipe .item-delete:before {
    content: '删除';
    color: #fff;
}

 

对于第二个问题,网上说用iscroll来解决。我们这里参考手机QQ中对联系人的滑动操作。

大致原理:在滑动最开始的时候,判断是Y轴的移动多 还是 X轴的移动多。 如果是X轴移动大,则判断为滑动删除操作,我们再使用preventDefault(); 


目前页面已经可以滚动,链接也可以点击,
请扫描二维码体验效果:

说明:http://hovertree.com/h/bjaf/rfsnyuyo.htm

评论:
  • 2016-07-04 18:57 我也是遇到这两个问题了
  • 2016-07-18 10:17 为什么删除按钮没效果
  • 2016-07-19 15:32 删除按钮没有实现js功能的,只是实现展示外形的css
  • 2016-10-21 17:18 是怎么样解决页面无法滚动的,还有页面上一些其他的链接也无法点击是怎么解决的
  • 2016-10-30 08:21 已经能够滚动了,链接也能够点击,请访问http://hovertree.com/texiao/mobile/8/ ,或者扫描上面二维码体验效果
  • 2016-11-02 09:33 怎样实现滑动第二个能够将第一个自动复位
  • 2016-11-21 10:02 我给删除按钮添加点击事件没有效果
  • 2016-11-22 11:50 已经为删除按钮添加了删除功能,请左滑消息,然后点击删除按钮体验效果
  • 2016-12-07 13:55 关于滑动第二个能够将第一个自动复位的功能,已经在hewenqi插件中实现,相关地址:http://hovertree.com/texiao/hewenqi/
  • 2017-04-03 18:05 怎么上下滑动的时候,li也会向左移动呢,怎么把他关掉