当前位置：首页 > VUE

vue实现底部tabbar

2026-01-18 20:16:20VUE

实现底部 TabBar 的方法

在 Vue 中实现底部 TabBar 可以通过多种方式完成，以下是几种常见的实现方法。

使用 Vue Router 和自定义组件

创建一个自定义的 TabBar 组件，结合 Vue Router 实现页面切换功能。

<!-- TabBar.vue -->
<template>
  <div class="tab-bar">
    <router-link
      v-for="(item, index) in tabs"
      :key="index"
      :to="item.path"
      class="tab-item"
      active-class="active"
    >
      <span class="icon">{{ item.icon }}</span>
      <span class="text">{{ item.text }}</span>
    </router-link>
  </div>
</template>

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

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

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

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

在 App.vue 中引入 TabBar 组件，并确保路由视图和 TabBar 布局合理。

vue实现底部tabbar

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

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

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

使用第三方 UI 库

许多 Vue UI 库提供了现成的 TabBar 组件，例如 Vant、Element UI 等。以下是使用 Vant 的示例：

安装 Vant：

vue实现底部tabbar

npm install vant

在项目中引入 Vant 的 TabBar 组件：

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

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

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

动态切换 TabBar 内容

如果需要根据路由动态切换 TabBar 的高亮状态，可以结合 Vue Router 的 $route 对象实现。

<template>
  <div class="tab-bar">
    <div
      v-for="(item, index) in tabs"
      :key="index"
      class="tab-item"
      :class="{ active: $route.path === item.path }"
      @click="$router.push(item.path)"
    >
      <span class="icon">{{ item.icon }}</span>
      <span class="text">{{ item.text }}</span>
    </div>
  </div>
</template>

注意事项

布局问题：TabBar 通常需要固定在页面底部，使用 position: fixed 并设置 bottom: 0。
路由匹配：确保 TabBar 的高亮状态与当前路由匹配，可以通过 $route.path 或 active-class 实现。
移动端适配：在移动端中，可能需要处理底部安全区域（如 iPhone X 系列的底部黑条），可以通过 CSS 的 env(safe-area-inset-bottom) 解决。