js 类似于移动端购物车删除，左移动删除

Posted 青青子衿。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 类似于移动端购物车删除，左移动删除相关的知识，希望对你有一定的参考价值。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
  <title>向左滑动删除</title>
  <style>

  
  .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);
  }
  
  .list-btn {
    position: absolute;
    top: 0;
    right: -80px;
    text-align: center;
    background: #fe3837;
    color: #fff;
    width: 80px
  }
  </style>
  <script>
  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>

  <section class="list">
    <ul class="list-ul">
      <li class="list-li">
        <div >
          哈号是看技术大家啥哈哈哈哈
        </div>
        <div class="list-btn">删除</div>
      </li>
      
    </ul>
  </section>
</body>

</html>

 

以上是关于js 类似于移动端购物车删除，左移动删除的主要内容，如果未能解决你的问题，请参考以下文章

计算机毕业设计node.js+vue+Web移动端外卖平台

瑞吉外卖项目剩余功能补充

014基于Vue.js的移动端购物商城网站(含源码课设报告)

js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动

Js实现移动端长按事件

text 从店面移动粘性页脚中删除购物车