当前位置：首页 > VUE

vue实现侧滑效果

2026-02-20 15:42:41VUE

实现侧滑效果的常见方法

使用CSS过渡和Vue数据绑定

通过Vue的数据绑定控制侧滑菜单的显示与隐藏，结合CSS过渡效果实现平滑动画。定义一个布尔值isOpen控制菜单状态，通过v-if或v-show与CSS的transform属性配合实现滑动效果。

<template>
  <div class="slide-menu" :class="{ 'open': isOpen }">
    <!-- 菜单内容 -->
  </div>
  <button @click="toggleMenu">切换菜单</button>
</template>

<script>
export default {
  data() {
    return { isOpen: false };
  },
  methods: {
    toggleMenu() { this.isOpen = !this.isOpen; }
  }
};
</script>

<style>
.slide-menu {
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  transition: transform 0.3s ease;
}
.slide-menu.open {
  transform: translateX(250px);
}
</style>

使用第三方库（如vue-touch）

对于需要手势滑动的场景，可集成vue-touch或hammer.js库。安装后通过配置滑动手势事件触发侧滑逻辑。

npm install vue-touch@next

<template>
  <v-touch @swipeleft="openMenu" @swiperight="closeMenu">
    <div class="menu" :class="{ 'active': isOpen }"></div>
  </v-touch>
</template>

动态计算滑动距离

结合touchstart、touchmove事件计算手指移动距离，动态设置菜单位移。需在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() {
      if (this.offsetX > 100) this.offsetX = 250;
      else this.offsetX = 0;
    }
  }
};
</script>

结合Vue Router实现路由侧滑

在路由切换时添加页面滑动动画效果，需在<router-view>外层包裹过渡组件并设置CSS动画。

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