当前位置：首页 > VUE

vue怎么实现滑动

2026-02-11 02:24:39VUE

Vue 实现滑动效果的方法

在 Vue 中实现滑动效果可以通过多种方式，以下是几种常见的实现方法：

使用 CSS 过渡和动画

通过 Vue 的过渡系统结合 CSS 实现滑动效果。适用于简单的进入/离开动画或状态切换。

<template>
  <transition name="slide">
    <div v-if="show">滑动内容</div>
  </transition>
</template>

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

使用第三方库（如 Swiper.js）

对于复杂的滑动场景（如轮播图、全屏滑动），推荐使用成熟的库如 Swiper.js。

<template>
  <swiper>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

export default {
  components: { Swiper, SwiperSlide }
};
</script>

手势库（如 Hammer.js）

实现更自然的手势滑动交互，适合移动端拖拽滑动场景。

import Hammer from 'hammerjs';

export default {
  mounted() {
    const hammer = new Hammer(this.$el);
    hammer.on('swipe', (e) => {
      console.log('滑动方向:', e.direction);
    });
  }
};

自定义滑动逻辑

通过监听 touch/mouse 事件实现完全自定义的滑动行为。

vue怎么实现滑动

<template>
  <div 
    @touchstart="startDrag"
    @touchmove="onDrag"
    @touchend="endDrag"
    :style="{ transform: `translateX(${offsetX}px)` }"
  >
    可滑动内容
  </div>
</template>

<script>
export default {
  data() {
    return { startX: 0, offsetX: 0 };
  },
  methods: {
    startDrag(e) {
      this.startX = e.touches[0].clientX;
    },
    onDrag(e) {
      this.offsetX = e.touches[0].clientX - this.startX;
    },
    endDrag() {
      // 滑动结束逻辑
    }
  }
};
</script>