vue实现滑动

Vue 实现滑动效果

使用 CSS 过渡和动画

通过 Vue 的 transition 组件结合 CSS 过渡或动画实现滑动效果。适用于简单的元素入场/离场滑动。

<template>
  <button @click="show = !show">Toggle Slide</button>
  <transition name="slide">
    <div v-if="show" class="box">滑动内容</div>
  </transition>
</template>

<script>
export default {
  data() {
    return { show: false }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
}
</style>

使用第三方库（如 Swiper）

对于复杂的轮播或滑动组件，推荐使用专为 Vue 封装的 Swiper 库。

安装依赖：

npm install swiper vue-awesome-swiper

示例代码：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in slides" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      swiperOptions: {
        loop: true,
        pagination: { el: '.swiper-pagination' }
      }
    }
  }
}
</script>

手势滑动实现（如 Hammer.js）

需要处理触摸手势时，可以结合手势识别库实现。

安装 Hammer.js：

npm install hammerjs

示例代码：

<template>
  <div ref="swipeArea" class="swipe-area">
    滑动区域（左右滑动试试）
  </div>
</template>

<script>
import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammer = new Hammer(this.$refs.swipeArea)
    hammer.on('swipeleft', () => console.log('向左滑动'))
    hammer.on('swiperight', () => console.log('向右滑动'))
  }
}
</script>

<style>
.swipe-area {
  width: 100%;
  height: 200px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

自定义滑动逻辑

通过监听鼠标/触摸事件实现自定义滑动效果。

<template>
  <div 
    class="draggable"
    @mousedown="startDrag"
    @touchstart="startDrag"
    @mousemove="onDrag"
    @touchmove="onDrag"
    @mouseup="endDrag"
    @touchend="endDrag"
    :style="{ transform: `translateX(${offsetX}px)` }"
  >
    可拖拽元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      offsetX: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX || e.touches[0].clientX
    },
    onDrag(e) {
      if (!this.isDragging) return
      const x = e.clientX || e.touches[0].clientX
      this.offsetX = x - this.startX
    },
    endDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.draggable {
  width: 100px;
  height: 100px;
  background: #42b983;
  cursor: grab;
  user-select: none;
}
</style>

响应式滑动导航

实现常见的移动端侧边栏滑动效果。

<template>
  <div class="container" :class="{ 'menu-open': isMenuOpen }">
    <div class="sidebar" @click="isMenuOpen = false">
      导航内容
    </div>
    <div class="content">
      <button @click="isMenuOpen = true">打开菜单</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { isMenuOpen: false }
  }
}
</script>

<style>
.container {
  position: relative;
  overflow-x: hidden;
}
.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100vh;
  background: #333;
  color: white;
  transition: transform 0.3s ease;
}
.content {
  transition: transform 0.3s ease;
}
.menu-open .sidebar {
  transform: translateX(250px);
}
.menu-open .content {
  transform: translateX(250px);
}
</style>