右滑-----删除

<template>
  <div class="contents">
    <div class="touch-item" @touchstart="touchstart" @touchend="touchend" >
      <div class="content" :class="{ active: flag == true }">
        aaaaaaaaaaaaaaaaaddddd
      </div>
      <div class="del" :class="{ active: flag == true }">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      startX: "", //开始的位置
      endX: "", //结束的位置
    };
  },
  mounted() {},
  methods: {
    touchstart(e) {
      console.log("___________");
      console.log("开始——————————", e.touches[0].clientX);
      this.startX = e.touches[0].clientX;
    },
    touchend(e) {
      console.log("结束——————————", e.changedTouches[0].clientX);
      this.endX = e.changedTouches[0].clientX;
      let cha1 = this.startX - this.endX;
      let cha2 = this.endX - this.startX;
      if (cha1 > 25) {
        this.flag = true;
      }
      if (cha2 > 25) {
        this.flag = false;
      }
    },
  },
};
</script>

<style>
.touch-item {
  height: 130px;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.content {
  background-color: rgb(100, 53, 187);
  flex: 1;
  width: 100%;
  padding: 0 30px;
  /* -webkit-transition: all 0.4s; */
  transition: all 0.4s;
  /* -webkit-transform: translateX(150px); */
  transform: translateX(300px);
  margin-left: -350px;
  /* box-sizing: border-box; */
}
.del {
  width: 300px;
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(300px);
  transition: all 0.4s;
}
.active {
  transform: translateX(0px);
}
</style>