vue实现tabbar

Vue 实现 TabBar 的方法

使用 Vue Router 实现基础 TabBar

安装 Vue Router 依赖后，创建路由配置并绑定到 TabBar 组件：

// router/index.js
const routes = [
  { path: '/home', component: Home },
  { path: '/category', component: Category },
  { path: '/cart', component: Cart },
  { path: '/profile', component: Profile }
]

创建 TabBar 组件模板：

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

添加样式控制激活状态：

.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
}
.active {
  color: #ff5777;
}

使用组件库快速实现

对于需要快速开发的场景，可以使用现成的 UI 组件库：

npm install vant

引入 Vant 的 TabBar 组件：

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

模板中使用组件：

<van-tabbar v-model="active">
  <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>

自定义高级 TabBar

需要实现复杂效果时可创建自定义组件：

// TabBarItem.vue
export default {
  props: {
    path: String,
    activeColor: {
      type: String,
      default: '#ff5777'
    }
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.path) !== -1
    }
  }
}

添加过渡动画效果：

.tab-item {
  transition: all .3s ease-out;
}
.tab-item.active {
  transform: scale(1.1);
}

移动端适配方案

针对不同屏幕尺寸进行适配：

// 在 mounted 中检测设备
mounted() {
  this.isMobile = window.innerWidth < 768
}

使用 rem 单位进行响应式布局：

.tab-bar {
  height: 1rem;
  font-size: 0.24rem;
}

状态管理集成

与 Vuex 结合管理 TabBar 状态：

// store/modules/tabbar.js
export default {
  state: {
    showTabBar: true
  },
  mutations: {
    toggleTabBar(state, payload) {
      state.showTabBar = payload
    }
  }
}

在组件中使用：

computed: {
  showTabBar() {
    return this.$store.state.tabbar.showTabBar
  }
}