当前位置：首页 > VUE

vue实现右滑

2026-03-07 22:03:36VUE

Vue 实现右滑功能

右滑功能通常用于移动端或触屏设备，实现手势操作。以下是几种常见的实现方式：

监听 touch 事件

通过监听 touchstart、touchmove 和 touchend 事件来判断滑动方向：

vue实现右滑

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      endX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.endX = e.touches[0].clientX
    },
    handleTouchEnd() {
      if (this.startX - this.endX > 50) {
        // 左滑逻辑
      } else if (this.endX - this.startX > 50) {
        // 右滑逻辑
      }
    }
  }
}
</script>

使用第三方库

Hammer.js 是专门处理手势的库，可以简化实现：

vue实现右滑

import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammer = new Hammer(this.$el)
    hammer.on('swiperight', () => {
      // 右滑处理逻辑
    })
  }
}

CSS transform 实现动画效果

结合 Vue 的过渡系统和 CSS transform 创建平滑的滑动动画：

<template>
  <div class="swipe-container">
    <transition name="slide">
      <div v-if="show" class="swipe-content">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

完整组件示例

创建一个可重用的右滑组件：

<template>
  <div 
    class="swipe-component"
    @touchstart="startSwipe"
    @touchmove="swiping"
    @touchend="endSwipe"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      touchStartX: 0,
      touchEndX: 0
    }
  },
  methods: {
    startSwipe(e) {
      this.touchStartX = e.changedTouches[0].screenX
    },
    swiping(e) {
      this.touchEndX = e.changedTouches[0].screenX
    },
    endSwipe() {
      if (this.touchEndX - this.touchStartX > 50) {
        this.$emit('swiped-right')
      }
    }
  }
}
</script>

<style>
.swipe-component {
  touch-action: pan-y;
}
</style>