实现购物车touch左滑删除操作

很多购物车页面,都实现了左滑操作删除操作,这是怎么实现的呢?

简单概括就是:

1. 包裹购物车商品的元素绑定touchstart事件,记录该元素的起始坐标clientX
2. 左滑后,记录该元素的终点坐标clientX
3. 两者之间的差值如果大于某个值(比如30px),更改该元素的样式
4. 滑动之前和之后的样式用translate3d来控制

一下是伪代码

    //滑动开始
    touchStart(e) {
      // 记录初始位置
      this.startX = e.touches[0].clientX;
      console.log(this.startX);
    },
    //滑动结束
    touchEnd(e) {
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
      console.log(this.endX);
      // 左滑,计算滑动距离
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        parentElement.dataset.type = 1;//自定义的样式data-type
      }
      // 右滑,计算滑动距离
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        parentElement.dataset.type = 0;////自定义的样式data-type
      }
      this.startX = 0;
      this.endX = 0;
    },

//样式变更
item[data-type="0"] {
  transform: translate3d(0, 0, 0);
}

item[data-type="1"] {
  transform: translate3d(-88px, 0, 0);
}