当前位置：首页 > VUE

vue底部tabbar实现

2026-01-16 19:36:04VUE

使用Vue Router实现底部TabBar

在Vue项目中，可以通过Vue Router结合自定义组件实现底部TabBar。创建一个名为TabBar.vue的组件，包含多个router-link用于导航。

<template>
  <div class="tab-bar">
    <router-link 
      v-for="tab in tabs" 
      :key="tab.path" 
      :to="tab.path"
      class="tab-item"
    >
      <span class="icon">{{ tab.icon }}</span>
      <span class="label">{{ tab.label }}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/home', icon: '🏠', label: '首页' },
        { path: '/category', icon: '📋', label: '分类' },
        { path: '/cart', icon: '🛒', label: '购物车' },
        { path: '/profile', icon: '👤', label: '我的' }
      ]
    }
  }
}
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 50px;
  background: #fff;
  border-top: 1px solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  text-decoration: none;
}

.router-link-active {
  color: #ff6700;
}
</style>

配置Vue Router路由

在router/index.js中配置对应的路由，确保路径与TabBar组件中的路径匹配。

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/category',
    component: () => import('@/views/Category.vue')
  },
  {
    path: '/cart',
    component: () => import('@/views/Cart.vue')
  },
  {
    path: '/profile',
    component: () => import('@/views/Profile.vue')
  }
]

在App.vue中引入TabBar

确保TabBar组件在所有页面底部显示，但要注意为页面内容预留底部空间。

<template>
  <div id="app">
    <router-view/>
    <TabBar/>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'

export default {
  components: {
    TabBar
  }
}
</script>

<style>
#app {
  padding-bottom: 50px; /* 与TabBar高度一致 */
}
</style>

使用第三方UI库实现

如需快速实现，可以使用第三方UI库如Vant的TabBar组件。

安装Vant：

npm install vant

在main.js中引入：

import { Tabbar, TabbarItem } from 'vant'
import 'vant/lib/index.css'

Vue.use(Tabbar).use(TabbarItem)

使用示例：

<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
  </van-tabbar>
</template>

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

实现动态TabBar

某些场景下需要根据不同用户角色显示不同TabBar项，可以通过计算属性动态生成。

<script>
export default {
  computed: {
    tabs() {
      const baseTabs = [
        { path: '/home', icon: '🏠', label: '首页' },
        { path: '/category', icon: '📋', label: '分类' }
      ]

      if (this.$store.getters.isLoggedIn) {
        baseTabs.push(
          { path: '/cart', icon: '🛒', label: '购物车' },
          { path: '/profile', icon: '👤', label: '我的' }
        )
      } else {
        baseTabs.push(
          { path: '/login', icon: '🔑', label: '登录' }
        )
      }

      return baseTabs
    }
  }
}
</script>

样式优化技巧

为提升用户体验，可以添加一些交互效果和视觉优化。

vue底部tabbar实现

.tab-item {
  transition: all 0.3s ease;
}

.tab-item:hover {
  transform: translateY(-3px);
}

.router-link-active {
  font-weight: bold;
}

.tab-bar {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
}