当前位置：首页 > VUE

vue实现tabbar

2026-01-08 00:37:28VUE

Vue 实现 TabBar 的方法

使用 Vue Router 实现基础 TabBar

安装 Vue Router 依赖：

npm install vue-router

创建路由配置文件（router/index.js）：

vue实现tabbar

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

创建 TabBar 组件：

<template>
  <div class="tab-bar">
    <router-link to="/" class="tab-item">首页</router-link>
    <router-link to="/about" class="tab-item">关于</router-link>
  </div>
</template>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background-color: #f5f5f5;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
}

.router-link-active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用第三方 UI 库实现

安装 Vant 组件库：

vue实现tabbar

npm install vant

使用 Vant 的 TabBar 组件：

<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/friends">朋友</van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/settings">设置</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { ref } from 'vue'
import { Tabbar, TabbarItem } from 'vant'

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  setup() {
    const active = ref(0)
    return { active }
  }
}
</script>

自定义高级 TabBar 实现

创建带图标和动画效果的 TabBar：

<template>
  <div class="custom-tabbar">
    <div 
      v-for="(item, index) in tabs" 
      :key="index" 
      class="tab-item"
      :class="{ 'active': currentTab === index }"
      @click="switchTab(index, item.path)"
    >
      <span class="icon" :class="item.icon"></span>
      <span class="label">{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { label: '首页', icon: 'icon-home', path: '/' },
        { label: '分类', icon: 'icon-category', path: '/category' },
        { label: '购物车', icon: 'icon-cart', path: '/cart' },
        { label: '我的', icon: 'icon-user', path: '/user' }
      ]
    }
  },
  methods: {
    switchTab(index, path) {
      this.currentTab = index
      this.$router.push(path)
    }
  }
}
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

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

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

.icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.label {
  font-size: 12px;
}
</style>