uniapp左滑删除

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。
touchend事件：当手指从屏幕上离开的时候触发。

除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。
　　touches：表示当前跟踪的触摸操作的touch对象的数组。
　　targetTouches：特定于事件目标的Touch对象的数组。
　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
　　
　　每个Touch对象包含的属性如下。
　　clientX：触摸目标在视口中的x坐标。
　　clientY：触摸目标在视口中的y坐标。
　　identifier：标识触摸的唯一ID。
　　pageX：触摸目标在页面中的x坐标。
　　pageY：触摸目标在页面中的y坐标。
　　screenX：触摸目标在屏幕中的x坐标。
　　screenY：触摸目标在屏幕中的y坐标。
　　target：触目的DOM节点目标。

<template>
  <view
    class="box"
    :style="{right:move+'px'}"
    @touchstart="drawStart"
    @touchmove="drawMove"
    @touchend="drawEnd"
  >
    <view class="b1">
      左滑删除
    </view>
    <view class="b2" @click="d()">
      删除
    </view>
  </view>
</template>
<script setup lang="ts">
const startX = ref(0)
const move = ref(0)
const d = async () => {
  const res = uni.showModal({
    title: '确定删除吗',
    confirmColor: '#e61f19',
  })
  if ((await res).confirm) {
    console.log('删除')
  }
}
// 开始触摸滑动
const drawStart = e => {
  console.log('开始触发')
  // const touch = e.touches[0]
  console.log(e.touches[0].clientX)

  startX.value = e.touches[0].clientX
}
// //触摸滑动
const drawMove = e => {
  console.log('滑动')
  move.value = startX.value - e.touches[0].clientX
  console.log(move.value)
  if (move.value > 100) {
    move.value = 100
  } else if (move.value < 0) {
    move.value = 0
  }
}
// //触摸滑动结束
const drawEnd = e => {
  console.log('滑动结束')
  // const touch = e.touches[0]
  console.log(e)
  if (move.value > 100) {
    move.value = 100
  } else if (move.value < 0) {
    move.value = 0
  }
}

</script>
<style scoped lang="scss">
.box {
  display: flex;
  position: relative;
}
.b1 {
  width: 750rpx;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: large;
  background-color: #fff;
  margin-top: 10px;
  border: 1px solid rgb(0 0 0);
}
.b2 {
  position: absolute;
  right: -100px;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: large;
  background-color: rgb(243 88 88);
  margin-top: 10px;
}
</style>