vue实现tabbar

实现基础TabBar结构

使用Vue的组件化思想构建TabBar，通常分为外层容器和单个Tab项。以下是一个基础实现模板：

<template>
  <div class="tab-bar">
    <div 
      v-for="(item, index) in tabs" 
      :key="index"
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="handleClick(index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabs: [
        { title: '首页' },
        { title: '分类' },
        { title: '购物车' },
        { title: '我的' }
      ]
    }
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

添加图标支持

引入图标库（如Font Awesome或自定义SVG）增强视觉表现：

<template>
  <div class="tab-item" @click="handleClick(index)">
    <i :class="item.icon"></i>
    <span>{{ item.title }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '首页', icon: 'fas fa-home' },
        { title: '分类', icon: 'fas fa-list' },
        // ...
      ]
    }
  }
}
</script>

<style>
.tab-item {
  flex-direction: column;
  font-size: 12px;
}

.tab-item i {
  margin-bottom: 4px;
  font-size: 20px;
}
</style>

路由集成

结合vue-router实现导航功能：

import { RouterLink } from 'vue-router'

// 修改模板部分
<RouterLink 
  v-for="(item, index) in tabs"
  :key="index"
  :to="item.path"
  custom
  v-slot="{ navigate, isActive }"
>
  <div 
    class="tab-item"
    :class="{ active: isActive }"
    @click="navigate"
  >
    <!-- 内容保持不变 -->
  </div>
</RouterLink>

// 修改数据
tabs: [
  { title: '首页', icon: 'fas fa-home', path: '/' },
  { title: '分类', icon: 'fas fa-list', path: '/category' },
  // ...
]

动态过渡效果

添加切换动画提升用户体验：

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

.active {
  transform: translateY(-3px);
}

/* 底部指示条动画 */
.tab-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25%;
  height: 3px;
  background: #42b983;
  transition: transform 0.3s ease;
}

.tab-bar.active-0::after {
  transform: translateX(0);
}
.tab-bar.active-1::after {
  transform: translateX(100%);
}
/* 其他索引位置... */

响应式设计

针对不同屏幕尺寸调整布局：

@media (min-width: 768px) {
  .tab-bar {
    position: static;
    box-shadow: none;
    border-top: 1px solid #eee;
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .tab-bar {
    height: 40px;
  }
}