H5 添加左划删除手势

添加左划删除手势

// 添加左划手势，通过添加swipeleft类实现
addSwipeLeft() {
  // 侧滑显示删除按钮
  var expansion = null // 是否存在展开的list
  var container = document.getElementById('shopCardId' + this.order.id) // 获取需要左划删除的元素
  var x, y, X, Y, swipeX, swipeY
  container.addEventListener('touchstart', function(event) { // 监听触摸开始事件
    x = event.changedTouches[0].pageX
    y = event.changedTouches[0].pageY
    swipeX = true
    swipeY = true
    if (expansion) {
      // expansion.className = "";
      expansion.classList.remove('swipeleft') // 判断是否展开，如果展开则收起
    }
  })
  container.addEventListener('touchmove', function(event) { // 监听touchmove，触摸滑动事件
    X = event.changedTouches[0].pageX
    Y = event.changedTouches[0].pageY
    // 左右滑动
    if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
      // 阻止事件冒泡
      event.stopPropagation()
      if (X - x > 10) {
        // 右滑
        event.preventDefault()
        // this.className = ""; //右滑收起
        this.classList.remove('swipeleft')
      }
      if (x - X > 10) {
        // 左滑
        event.preventDefault()
        this.classList.add('swipeleft')
        expansion = this
      }
      swipeY = false
    }
    // 上下滑动
    if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
      swipeX = false
    }
  })
},

// 支持左划 
// 再外层父元素
.shopCartItemDiv{
  transition: all 0.3s linear;
  position: relative;
}
// 左划元素改变
.swipeleft {
  transform: translateX(-15%);
  -webkit-transform: translateX(-15%);
  // width: 115%;
}
// 左划后出现在左边的元素
.deleteDiv {
  font-size: 0.4rem;
  color: #fff;
  background-color: #f02c38;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  // width: 0;
  width: 50px;
  height: 91px;
  line-height: 91px;
  text-align: center;
}
// 没有左划时不显示，.shopCard和swipeleft同级
.shopCard + .deleteDiv{
  display: none;
}
// 左划后deleteDiv显示，绝对定位定位到合适位置
.swipeleft + .deleteDiv{
  display: block;
  position: absolute;
  top: 16px;
  right: 5px;
}