Vue3简易微信右滑删除逻辑如何实现

在移动端开发中，右滑删除是一个非常常见的交互方式，尤其是在聊天列表、任务列表等场景中。本文将详细介绍如何在Vue3中实现一个简易的微信右滑删除逻辑。

1. 需求分析

我们需要实现一个类似于微信聊天列表的右滑删除功能，具体需求如下：

1. 列表项可以左右滑动。
2. 滑动到一定距离时，显示删除按钮。
3. 滑动距离超过一定阈值时，自动展开删除按钮。
4. 点击删除按钮时，删除对应的列表项。

2. 技术选型

为了实现这个功能，我们需要使用以下技术：

• Vue3：作为前端框架，用于构建组件和状态管理。
• CSS3：用于实现滑动动画和样式。
• Touch事件：用于监听用户的滑动操作。

3. 实现步骤

3.1 创建Vue3项目

首先，我们需要创建一个Vue3项目。如果你还没有安装Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的Vue3项目：

vue create vue3-swipe-delete

3.2 创建列表组件

接下来，我们创建一个简单的列表组件 SwipeList.vue，用于展示列表项。

<template>
  <div class="swipe-list">
    <div
      v-for="(item, index) in items"
      :key="item.id"
      class="swipe-item"
      @touchstart="onTouchStart(index, $event)"
      @touchmove="onTouchMove(index, $event)"
      @touchend="onTouchEnd(index)"
    >
      <div class="item-content">
        {{ item.text }}
      </div>
      <div class="delete-button" @click="deleteItem(index)">
        删除
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '列表项 1' },
        { id: 2, text: '列表项 2' },
        { id: 3, text: '列表项 3' },
      ],
      startX: 0,
      currentX: 0,
      isSwiping: false,
    };
  },
  methods: {
    onTouchStart(index, event) {
      this.startX = event.touches[0].clientX;
      this.currentX = this.startX;
      this.isSwiping = true;
    },
    onTouchMove(index, event) {
      if (!this.isSwiping) return;
      this.currentX = event.touches[0].clientX;
      const deltaX = this.currentX - this.startX;
      if (deltaX < 0) {
        this.items[index].offsetX = Math.max(deltaX, -100); // 限制最大滑动距离
      }
    },
    onTouchEnd(index) {
      this.isSwiping = false;
      const deltaX = this.currentX - this.startX;
      if (deltaX < -50) {
        this.items[index].offsetX = -100; // 自动展开删除按钮
      } else {
        this.items[index].offsetX = 0; // 恢复原位
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.swipe-list {
  width: 100%;
  overflow: hidden;
}

.swipe-item {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  transition: transform 0.3s ease;
}

.item-content {
  flex: 1;
  padding: 0 16px;
}

.delete-button {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4444;
  color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.swipe-item[style*="translateX"] .delete-button {
  transform: translateX(0);
}
</style>

3.3 实现滑动逻辑

在 SwipeList.vue 组件中，我们通过 touchstart、touchmove 和 touchend 事件来监听用户的滑动操作。

• onTouchStart：记录滑动的起始位置。
• onTouchMove：计算滑动的距离，并更新列表项的偏移量。
• onTouchEnd：根据滑动的距离决定是否展开删除按钮。

3.4 实现删除功能

在 deleteItem 方法中，我们通过 splice 方法删除对应的列表项。

3.5 添加样式

通过CSS3的 transform 属性来实现滑动动画，并通过 transition 属性来平滑过渡。

4. 完整代码

以下是完整的 SwipeList.vue 组件代码：

<template>
  <div class="swipe-list">
    <div
      v-for="(item, index) in items"
      :key="item.id"
      class="swipe-item"
      :style="{ transform: `translateX(${item.offsetX || 0}px)` }"
      @touchstart="onTouchStart(index, $event)"
      @touchmove="onTouchMove(index, $event)"
      @touchend="onTouchEnd(index)"
    >
      <div class="item-content">
        {{ item.text }}
      </div>
      <div class="delete-button" @click="deleteItem(index)">
        删除
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '列表项 1' },
        { id: 2, text: '列表项 2' },
        { id: 3, text: '列表项 3' },
      ],
      startX: 0,
      currentX: 0,
      isSwiping: false,
    };
  },
  methods: {
    onTouchStart(index, event) {
      this.startX = event.touches[0].clientX;
      this.currentX = this.startX;
      this.isSwiping = true;
    },
    onTouchMove(index, event) {
      if (!this.isSwiping) return;
      this.currentX = event.touches[0].clientX;
      const deltaX = this.currentX - this.startX;
      if (deltaX < 0) {
        this.items[index].offsetX = Math.max(deltaX, -100); // 限制最大滑动距离
      }
    },
    onTouchEnd(index) {
      this.isSwiping = false;
      const deltaX = this.currentX - this.startX;
      if (deltaX < -50) {
        this.items[index].offsetX = -100; // 自动展开删除按钮
      } else {
        this.items[index].offsetX = 0; // 恢复原位
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.swipe-list {
  width: 100%;
  overflow: hidden;
}

.swipe-item {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  transition: transform 0.3s ease;
}

.item-content {
  flex: 1;
  padding: 0 16px;
}

.delete-button {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4444;
  color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.swipe-item[style*="translateX"] .delete-button {
  transform: translateX(0);
}
</style>

5. 运行项目

在项目根目录下运行以下命令，启动开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，即可看到效果。

6. 总结

通过本文的介绍，我们实现了一个简易的微信右滑删除功能。这个功能的核心在于监听用户的滑动操作，并通过CSS3的 transform 属性来实现滑动动画。在实际开发中，你可以根据需求进一步优化和扩展这个功能，例如添加更多的交互效果、支持多手势操作等。

希望本文对你有所帮助，祝你在Vue3开发中取得更多成果！