当前位置：首页 > VUE

vue实现移动端tabbar

2026-02-23 08:06:00VUE

Vue 实现移动端 TabBar 的方法

使用 Vue Router 实现路由切换

在 Vue 项目中，可以通过 Vue Router 实现 TabBar 的路由切换功能。创建一个 TabBar 组件，并在其中定义导航按钮，通过 router-link 实现路由跳转。

<template>
  <div class="tab-bar">
    <router-link to="/home" class="tab-item">首页</router-link>
    <router-link to="/category" class="tab-item">分类</router-link>
    <router-link to="/cart" class="tab-item">购物车</router-link>
    <router-link to="/profile" class="tab-item">我的</router-link>
  </div>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: #fff;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
}
.tab-item {
  padding: 8px 0;
  text-align: center;
  color: #666;
  text-decoration: none;
}
.tab-item.router-link-active {
  color: #ff6700;
}
</style>

动态高亮当前选中项

通过 Vue Router 的 router-link-active 类可以自动高亮当前选中的 TabBar 项。如果需要自定义高亮样式，可以在 CSS 中覆盖默认样式。

.tab-item.router-link-active {
  color: #ff6700;
  font-weight: bold;
}

使用图标增强视觉效果

引入图标库（如 Font Awesome 或自定义 SVG 图标）可以为 TabBar 添加视觉吸引力。

vue实现移动端tabbar

<router-link to="/home" class="tab-item">
  <i class="icon-home"></i>
  <span>首页</span>
</router-link>

适配移动端布局

通过 CSS 的 flex 布局和 fixed 定位，确保 TabBar 固定在页面底部，并适配不同屏幕尺寸。

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  height: 50px;
  background: #fff;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

添加过渡动画

通过 Vue 的过渡效果或 CSS 动画，为 TabBar 的切换添加平滑的视觉反馈。

vue实现移动端tabbar

.tab-item {
  transition: color 0.3s ease;
}
.tab-item:hover {
  color: #ff6700;
}

响应式设计

通过媒体查询调整 TabBar 在不同设备上的显示效果，例如在小屏幕上隐藏文字仅显示图标。

@media (max-width: 480px) {
  .tab-item span {
    display: none;
  }
  .tab-item i {
    font-size: 20px;
  }
}

使用第三方库简化开发

如果需要更复杂的功能（如徽标提示），可以集成第三方库如 vant 或 mint-ui，它们提供了现成的 TabBar 组件。

import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);

<van-tabbar v-model="active">
  <van-tabbar-item icon="home" to="/home">首页</van-tabbar-item>
  <van-tabbar-item icon="cart" to="/cart">购物车</van-tabbar-item>
</van-tabbar>