类似于淘宝、qq等左滑动删除

<div class="block_5">
    <div class="product_Lists" v-for="(item,index) in cartList" :class="{move:candelete.id==item.id}" @touchstart="touchStart(item)" @touchend="touchEnd(item)" :key="index">
    <img class="icon_9" :src="constants.image13" />
    <img class="layer" :src="constants.image14" />
    <div class="block_4">
        <span class="whitecmPrev">MUSUN MS-J99 2A Fastrrtgvbgf</span>
        <span class="whitecm">White,90cm</span>
        <div class="block_3">
            <div class="moneyWrap">
                <span class="money">$200</span>
                <img class="icon_10" :src="constants.image15" />
            </div>
            <div class="group_3">
                <span class="num">2</span>
                <img class="icon_11" :src="constants.image16" />
            </div>
            <img class="verticalLine" :src="constants.image17" />
        </div>
    </div>
    <!-- 删除按钮 -->
    <div class="del-btn">
        <span>删除</span>
    </div>
</div>

style 样式

.block_5 {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}
.product_Lists{
  display: flex;
  flex-direction: row;
  margin-top: 2.93vw;
  width: 100%;
  position: relative;
  transform: translateX(0);
  transition: all .3s;
  box-sizing: border-box;
}
.product_Lists.move {
  transform: translateX(-60px);
  box-sizing: border-box;
}

.block_5 .del-btn{
  width: 18vw;
  height: 100%;
  position: absolute;
  top: 0;
  text-align: center;
  background: #fe3837;
  color: #fff;
  right: -1.9333vw;
  z-index: 3;
  transform: translateX(60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

js

data(){
    return{
        clientNum: {}, // 记录开始滑动（x1）,结束滑动（x2）的鼠标指针的位置
        candelete: {} // 滑动的item
    }
},
methods: {
    touchStart (item) {
      let touchs = event.changedTouches[0]
      // 记录开始滑动的鼠标位置
      this.clientNum.x1 = touchs.pageX
      this.candelete = {}
    },
    touchEnd (item) {
      let touchs = event.changedTouches[0]
      // 记录结束滑动的鼠标位置
      this.clientNum.x2 = touchs.pageX
      this.candelete = {}
      // 判断滑动距离是否大于50，大于50则判定为滑动成功，否则失败
      if (
        this.clientNum.x2 < this.clientNum.x1 &&
        Math.abs(this.clientNum.x1) - Math.abs(this.clientNum.x2) > 50
      ) {
        // event.preventDefault()
        this.candelete = item
      } else if (
        this.clientNum.x2 > this.clientNum.x1 &&
        Math.abs(this.clientNum.x2) - Math.abs(this.clientNum.x1) > 10
      ) {
        // event.preventDefault()
        this.candelete = {}
      }
    }
}