vue实现侧滑

Vue 实现侧滑菜单的方法

使用 Vue Touch 或 Hammer.js 实现手势侧滑

安装 vue-touch 或 hammer.js 库来处理触摸事件：

npm install vue-touch hammerjs

在 Vue 组件中引入并配置手势事件：

import VueTouch from 'vue-touch'
import Hammer from 'hammerjs'

Vue.use(VueTouch, { name: 'v-touch', hammer: Hammer })

export default {
  methods: {
    handleSwipe(direction) {
      if (direction === 'left') {
        // 向左滑动逻辑
      } else if (direction === 'right') {
        // 向右滑动逻辑
      }
    }
  }
}

模板中使用 v-touch 指令：

<v-touch @swipeleft="handleSwipe('left')" @swiperight="handleSwipe('right')">
  <div class="slider-content">可滑动内容</div>
</v-touch>

纯 CSS 过渡动画实现

通过 Vue 的 v-bind:class 和 CSS 过渡实现平滑侧滑效果：

<template>
  <div class="slider-container">
    <div class="slider-menu" :class="{ 'active': isOpen }">
      <!-- 菜单内容 -->
    </div>
    <div class="slider-content" @click="isOpen = false">
      <!-- 主内容区 -->
    </div>
  </div>
</template>

<style>
.slider-menu {
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  transition: transform 0.3s ease;
}

.slider-menu.active {
  transform: translateX(250px);
}

.slider-content {
  transition: transform 0.3s ease;
}

.slider-menu.active + .slider-content {
  transform: translateX(250px);
}
</style>

结合 Vuex 管理状态

对于应用级侧滑状态管理，可以使用 Vuex：

// store.js
export default new Vuex.Store({
  state: {
    drawerOpen: false
  },
  mutations: {
    toggleDrawer(state) {
      state.drawerOpen = !state.drawerOpen
    }
  }
})

组件中通过计算属性获取状态：

computed: {
  isOpen() {
    return this.$store.state.drawerOpen
  }
},
methods: {
  toggleMenu() {
    this.$store.commit('toggleDrawer')
  }
}

移动端优化方案

针对移动端添加触摸事件监听：

mounted() {
  this.$el.addEventListener('touchstart', this.handleTouchStart)
  this.$el.addEventListener('touchmove', this.handleTouchMove)
  this.$el.addEventListener('touchend', this.handleTouchEnd)
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX
  },
  handleTouchMove(e) {
    this.currentX = e.touches[0].clientX
    const diff = this.startX - this.currentX
    if (Math.abs(diff) > 50) {
      this.$store.commit('toggleDrawer', diff > 0)
    }
  }
}

性能优化技巧

使用 CSS will-change 属性提升动画性能：

.slider-menu {
  will-change: transform;
}

考虑使用 Vue 的 <transition> 组件实现更复杂的动画效果：

<transition name="slide">
  <div class="slider-menu" v-if="isOpen"></div>
</transition>

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