写一个js向左滑动删除交互特效的插件——Html5 touchmove

需求描述

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

纯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>

做成zepto插件

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

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

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>

效果：

写一个js向左滑动删除交互特效的插件——Html5 touchmove

实际项目中的应用效果：

写一个js向左滑动删除交互特效的插件——Html5 touchmove

消除BUG

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

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

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

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

.itemWipe .item-delete:before {

    content: '删除';

    color: #fff;

}

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

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

其中，我们加入一个变量flaxX来判断滑动方向，会在第一次触发滑动事件时设置。

之后就可以根据滑动方向来选择是否阻止浏览器默认事件了。

修改后： 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; //触摸位置X

     var initY; //触摸位置Y

     var moveX; //滑动时的位置X

     var moveY; //滑动时的位置Y

     var X = 0; //移动距离X

     var Y = 0; //移动距离Y

     var flagX = 0; //是否是左右滑动 0为初始，1为左右，2为上下，在move中设置，在end中归零

     var objX = 0; //目标对象位置

     $(this).on('touchstart', function(event) {

       console.log('start..');

       var obj = this;

       initX = event.targetTouches[0].pageX;

       initY = event.targetTouches[0].pageY;

       console.log(initX + ':' + initY);

       objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

       console.log (objX);

       if (objX == 0) {

         $(this).on('touchmove', function(event) {

           // 判断滑动方向，X轴阻止默认事件，Y轴跳出使用浏览器默认

           if (flagX == 0) {

             setScrollX(event);

             return;

           } else if (flagX == 1) {

             event.preventDefault();

           } else {

             return;

           }

           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) {

           // 判断滑动方向，X轴阻止默认事件，Y轴跳出使用浏览器默认

           if (flagX == 0) {

             setScrollX(event);

             return;

           } else if (flagX == 1) {

             event.preventDefault();

           } else {

             return;

           }

           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) {

       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;

       }

       flagX = 0;

     })

     //设置滑动方向

     function setScrollX(event) {

       moveX = event.targetTouches[0].pageX;

       moveY = event.targetTouches[0].pageY;

       X = moveX - initX;

       Y = moveY - initY;

       if (Math.abs(X) > Math.abs(Y)) {

         flagX = 1;

       } else {

         flagX = 2;

       }

       return flagX;

     }

     //链式返回

     return this;

   };

 })(Zepto);

秒客网

写一个js向左滑动删除交互特效的插件——Html5 touchmove

需求描述

纯js实现

做成zepto插件

消除BUG

相关文章

写一个js向左滑动删除 交互特效的插件——Html5 touchmove

需求描述

纯js实现

做成zepto插件

消除BUG

相关文章

写一个js向左滑动删除交互特效的插件——Html5 touchmove