将微信右滑逻辑移植到你的Vue3项目中，轻松实现类似功能

2023-12-06 02:02:59

        <template>
          <div class="container">
            <div class="item" @touchstart="start" @touchmove="move" @touchend="end">
              {{ text }}
            </div>
          </div>
        </template>

        <script>
        import { ref } from 'vue'

        export default {
          setup() {
            const text = ref('我是微信右滑效果，可以向右滑出更多选项！')
            const startPosition = ref(0)
            const movePosition = ref(0)

            const start = (e) => {
              startPosition.value = e.touches[0].clientX
            }

            const move = (e) => {
              movePosition.value = e.touches[0].clientX
            }

            const end = () => {
              if (movePosition.value - startPosition.value > 50) {
                text.value = '我被右滑了！'
              }
            }

            return {
              text,
              start,
              move,
              end
            }
          }
        }
        </script>

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

        .item {
          width: 200px;
          height: 200px;
          background-color: #ccc;
          color: #fff;
          font-size: 24px;
          line-height: 200px;
          text-align: center;
        }
        </style>

现在，我们来模拟一下这个过程。当你在手机上点击这个按钮时，@touchstart事件就会触发，startPosition.value会记录下你手指按下的位置。当你在手机上滑动时，@touchmove事件就会触发，movePosition.value会记录下你手指当前的位置。当你在手机上松开手指时，@touchend事件就会触发，此时我们会比较movePosition.value和startPosition.value的值。如果movePosition.value - startPosition.value > 50，说明你已经向右滑动了超过50个像素，那么我们就将text.value的值改为“我被右滑了！”。

这就是实现这个微信右滑功能的思路。







今天项目需求需要实现一个类似于微信右滑显示额外选项的功能，记录一下实现思路。

**一. 搭建简易的页面** 

对应的代码，界面使用了tailwindCSS，代码非常简单，就是普通的定位，关键的定位已经用黄色框框圈起来。

```html
<template>
  <div class="container">
    <div class="item" @touchstart="start" @touchmove="move" @touchend="end">
      {{ text }}
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const text = ref('我是微信右滑效果，可以向右滑出更多选项！')
    const startPosition = ref(0)
    const movePosition = ref(0)

    const start = (e) => {
      startPosition.value = e.touches[0].clientX
    }

    const move = (e) => {
      movePosition.value = e.touches[0].clientX
    }

    const end = () => {
      if (movePosition.value - startPosition.value > 50) {
        text.value = '我被右滑了！'
      }
    }

    return {
      text,
      start,
      move,
      end
    }
  }
}
</script>

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

.item {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  color: #fff;
  font-size: 24px;
  line-height: 200px;
  text-align: center;
}
</style>

这就是实现这个微信右滑功能的思路。

二. 实现微信右滑效果

首先，我们需要创建一个组件来处理触摸事件。这个组件可以是一个<div>元素，也可以是一个<button>元素。
其次，我们需要给这个组件添加@touchstart、@touchmove和@touchend事件监听器。
在@touchstart事件监听器中，我们需要记录下手指按下的位置。
在@touchmove事件监听器中，我们需要记录下手指当前的位置。
在@touchend事件监听器中，我们需要比较手指按下的位置和手指当前的位置。如果手指向右滑动了超过50个像素，那么我们就需要执行相应的操作，比如显示一个菜单或者触发一个事件。