H5左滑刪除JS插件

<script type="text/javascript">
    /**
      * 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);
</script>

現在滑動a標簽，對是a標簽，把a標簽跟刪除按鈕分開，不然點擊刪除會觸發li的點擊事件：

效果圖：

HTML結構：

<ul>
    <li>
        <a href="www.baidu.com">這是滑動內容</a>
        <div class="item-delete"></div>
    </li>
    <li>
        <a href="www.baidu.com">這是滑動內容</a>
        <div class="item-delete"></div>
    </li>
</ul>

其它具體樣式就不一一展示，就寫按鈕樣式：

CSS樣式：

.item-delete {
    position: absolute;
    top: 0;
    right: -60px;
    background: #c93535;
    color: #fff;
    width: 60px;
    height: 100%;
    text-align: center;
    display: inline-block;
    line-height: 72px;
    font-size: 12px;
    border: 1px solid #fff;
    z-index: 100;
}
.item-delete:before {
    content: '刪除';
    color: #fff;
}
.ul {
    overflow: hidden;
}

最終效果可以參考：

全車品保養選擇車型效果

參考文章地址：

https://www.cnblogs.com/woodk/p/5360494.html