uniapp을 사용하여 슬라이딩 삭제 기능 구현

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart(index)" @touchmove="touchMove(index)" @touchend="touchEnd(index)">
      <view class="content">{{ item }}</view>
      <view class="delete" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['列表项1', '列表项2', '列表项3', '列表项4', '列表项5'],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      deleteWidth: 100,
      deletingIndex: -1
    }
  },
  methods: {
    touchStart(index) {
      this.deletingIndex = -1;
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchMove(index) {
      this.endX = event.changedTouches[0].pageX;
      this.endY = event.changedTouches[0].pageY;
      let moveX = this.endX - this.startX;
      let moveY = this.endY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0 && Math.abs(moveX) >= this.deleteWidth) {
        this.deletingIndex = index;
      } else if (this.deletingIndex === index && Math.abs(moveX) < Math.abs(moveY)) {
        this.deletingIndex = -1;
      }
    },
    touchEnd(index) {
      if (this.deletingIndex === index) {
        this.deleteItem(index);
      }
      this.deletingIndex = -1;
      this.startX = 0;
      this.startY = 0;
      this.endX = 0;
      this.endY = 0;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

<style>
.item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-left: 20px;
  font-size: 28px;
}

.delete {
  width: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  font-size: 28px;
}
</style>