vue实现底部菜单

实现底部菜单的基本结构

在Vue中实现底部菜单通常需要结合路由和组件化思想。创建一个BottomMenu.vue组件，包含固定的底部定位和菜单项。

<template>
  <div class="bottom-menu">
    <div 
      v-for="item in menuItems" 
      :key="item.path" 
      class="menu-item"
      :class="{ active: $route.path === item.path }"
      @click="navigateTo(item.path)"
    >
      <i :class="item.icon"></i>
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

样式设置

底部菜单需要固定定位并设置合理的z-index，确保始终显示在页面最底层。

<style scoped>
.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.menu-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
}

.menu-item.active {
  color: #42b983;
}

.menu-item i {
  font-size: 20px;
  margin-bottom: 2px;
}
</style>

路由配置

在Vue Router中配置对应的路由路径，确保点击菜单能正确跳转。

<script>
export default {
  data() {
    return {
      menuItems: [
        { name: '首页', path: '/home', icon: 'icon-home' },
        { name: '分类', path: '/category', icon: 'icon-category' },
        { name: '购物车', path: '/cart', icon: 'icon-cart' },
        { name: '我的', path: '/profile', icon: 'icon-user' }
      ]
    }
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path)
    }
  }
}
</script>

图标引入

可以使用字体图标库如Font Awesome或自定义SVG图标。

<!-- 在public/index.html中引入Font Awesome -->
<link 
  rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>

动态激活状态

通过当前路由路径匹配菜单项的path，动态添加active类实现高亮效果。

computed: {
  activeIndex() {
    return this.menuItems.findIndex(
      item => item.path === this.$route.path
    )
  }
}

移动端适配

添加viewport meta标签确保在移动设备上正常显示。

<!-- 在public/index.html中 -->
<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

安全区域适配

针对iOS设备，需要考虑底部安全区域。

.bottom-menu {
  padding-bottom: env(safe-area-inset-bottom);
}