vue 底部菜单实现

实现 Vue 底部菜单的方法

使用 v-if 或 v-show 控制显示

在 Vue 中可以通过条件渲染控制底部菜单的显示与隐藏。v-if 适合动态切换频率较低的场景，v-show 适合频繁切换的场景。

<template>
  <div class="bottom-menu" v-show="isMenuVisible">
    <!-- 菜单内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: true
    }
  }
}
</script>

<style>
.bottom-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
</style>

使用路由匹配显示不同菜单

结合 Vue Router 的 meta 字段，可以在不同路由下显示不同的底部菜单。

// router.js
const routes = [
  {
    path: '/home',
    component: Home,
    meta: { showFooter: true }
  },
  {
    path: '/detail',
    component: Detail,
    meta: { showFooter: false }
  }
]

<template>
  <div class="bottom-menu" v-if="$route.meta.showFooter">
    <!-- 菜单内容 -->
  </div>
</template>

使用组件库快速实现

Element UI、Vant 等流行组件库提供了现成的底部导航组件。

使用 Vant 的 Tabbar 组件：

<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item icon="home">首页</van-tabbar-item>
    <van-tabbar-item icon="search">搜索</van-tabbar-item>
    <van-tabbar-item icon="friends">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  }
}
</script>

自定义动画效果

为底部菜单添加过渡动画可以提升用户体验。

<template>
  <transition name="slide-up">
    <div class="bottom-menu" v-show="isMenuVisible">
      <!-- 菜单内容 -->
    </div>
  </transition>
</template>

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

响应式设计考虑

针对不同屏幕尺寸调整底部菜单样式。

.bottom-menu {
  /* 默认样式 */
}

@media (max-width: 768px) {
  .bottom-menu {
    height: 60px;
  }
}

状态管理集成

对于复杂应用，可以使用 Vuex 管理底部菜单状态。

// store.js
export default new Vuex.Store({
  state: {
    footerVisible: true
  },
  mutations: {
    toggleFooter(state) {
      state.footerVisible = !state.footerVisible
    }
  }
})

<template>
  <div class="bottom-menu" v-if="$store.state.footerVisible">
    <!-- 菜单内容 -->
  </div>
</template>