帮我写一个uniapp vue3的用户列表页面，要支持右滑删除

好的，下面是一个使用 Vue3 Composition API 实现的uniapp用户列表页面，支持右滑删除：

<template>
  <view class="container">
    <view class="user-list">
      <view class="user-item" v-for="(user, index) in userList" :key="index">
        <view class="user-info">
          <text class="user-name">{{ user.name }}</text>
          <text class="user-email">{{ user.email }}</text>
        </view>
        <view class="delete-btn" @click.stop="deleteUser(index)">
          <text class="btn-text">删除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      userList: [
        { name: '张三', email: 'zhangsan@xxx.com' },
        { name: '李四', email: 'lisi@xxx.com' },
        { name: '王五', email: 'wangwu@xxx.com' },
      ],
    });

    const deleteUser = (index: number) => {
      state.userList.splice(index, 1);
    };

    const handleTouchStart = (e: TouchEvent) => {
      // 记录开始触摸的位置和时间
      const { clientX, clientY } = e.touches[0];
      state.touchStartX = clientX;
      state.touchStartY = clientY;
      state.touchStartTime = Date.now();
      // 清空之前的状态
      state.swipeDirection = '';
      state.swipeX = 0;
      state.swipeY = 0;
      state.swipeStartTime = 0;
    };

    const handleTouchMove = (e: TouchEvent, index: number) => {
      // 记录滑动中的位置和时间
      const { clientX, clientY } = e.touches[0];
      const touchMoveX = clientX;
      const touchMoveY = clientY;
      const touchMoveTime = Date.now();
      // 计算滑动距离和方向
      const deltaX = touchMoveX - state.touchStartX;
      const deltaY = touchMoveY - state.touchStartY;
      const absDeltaX = Math.abs(deltaX);
      const absDeltaY = Math.abs(deltaY);
      if (
        (state.swipeDirection === '' && absDeltaX > absDeltaY) ||
        (state.swipeDirection === 'horizontal' && absDeltaX > 0)
      ) {
        state.swipeDirection = 'horizontal';
        e.preventDefault();
        // 计算滑动距离和速度
        state.swipeX = deltaX;
        state.swipeY = 0;
        const swipeTime = touchMoveTime - state.touchStartTime;
        state.swipeSpeed = absDeltaX / swipeTime;
        // 更新滑动状态
        const swipeItem = document.getElementById(`user-item-${index}`);
        swipeItem.style.transform = `translateX(${deltaX}px)`;
        swipeItem.style.transition = 'none';
      } else if (
        (state.swipeDirection === '' && absDeltaY > absDeltaX) ||
        (state.swipeDirection === 'vertical' && absDeltaY > 0)
      ) {
        state.swipeDirection = 'vertical';
      }
    };

    const handleTouchEnd = (e: TouchEvent, index: number) => {
      // 计算滑动距离和速度
      const { clientX } = e.changedTouches[0];
      const deltaX = clientX - state.touchStartX;
      const absDeltaX = Math.abs(deltaX);
      const swipeTime = Date.now() - state.touchStartTime;
      const swipeSpeed = absDeltaX / swipeTime;
      // 判断是否滑动超过阈值，超过则删除该项
      if (state.swipeDirection === 'horizontal' && absDeltaX > 100 && swipeSpeed > 0.5) {
        const swipeItem = document.getElementById(`user-item-${index}`);
        swipeItem.style.transform = `translateX(${deltaX > 0 ? 200 : -200}px)`;
        swipeItem.style.transition = 'transform 0.3s ease';
        setTimeout(() => {
          state.userList.splice(index, 1);
        }, 300);
      } else {
        const swipeItem = document.getElementById(`user-item-${index}`);
        swipeItem.style.transform = 'translateX(0)';
        swipeItem.style.transition = 'transform 0.3s ease';
      }
    };

    return {
      state,
      deleteUser,
      handleTouchStart,
      handleTouchMove,
      handleTouchEnd,
    };
  },
});
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.user-list {
  width: 100%;
}

.user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  /* 右滑删除相关样式 */
  position: relative;
  overflow: hidden;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
}

.user-email {
  font-size: 28rpx;
  color: #666;
}

.delete-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200rpx;
  background-color: #f00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  transform: translateX(200rpx);
  transition: transform 0.3s;
}

.delete-btn.active {
  transform: translateX(0);
}
</style>

上面的代码中，我们使用了 Vue3 Composition API 来定义组件，并使用了 reactive 函数来创建响应式数据。为了实现右滑删除的效果，我们监听了 touchstart、touchmove 和 touchend 事件，并根据事件的信息计算出滑动距离和方向，然后更新列表项的样式。

当用户滑动距离超过阈值时，我们使用 setTimeout 函数来延迟删除对应的项。为了避免出现异步更新数据的问题，我们使用 state.userList.splice 方法来删除列表项。

注意：上面的代码只是一个简单的示例，实际开发中可能需要根据具体需求进行调整。