更新记录

1.0.1（2025-05-18）

更新日志

[1.0.0] - 2025-05-18

新增

• 新增五种样式类型：默认样式、毛玻璃样式、圆形样式、浮动样式、突出样式
• 支持自定义颜色配置：普通颜色、选中颜色、背景颜色
• 支持自定义选中背景颜色，每种样式可独立配置
• 支持安全区域适配
• 支持图标和文字的自定义配置

优化

• 优化样式结构，提升代码可维护性
• 优化动画效果，使用 cubic-bezier 实现更流畅的过渡
• 优化浮动样式的布局，确保内容完美居中
• 优化突出样式，移除中间项的文本显示
• 优化毛玻璃效果，增加渐变背景
• 优化选中状态的视觉反馈，增加阴影和缩放效果

修复

• 修复样式绑定语法，移除无效的 v-bind 用法
• 修复组件导入路径问题
• 修复浮动样式垂直居中问题
• 修复样式类型切换时的过渡效果

[0.1.0] - 2025-03-20

新增

• 基础组件结构
• 基础样式配置
• 基础交互功能

1.0.0（2025-03-20）

• 新增 tab-bar 组件

平台兼容性

uni-app

其他

tab-bar 组件

一个功能丰富、样式多样的底部导航栏组件，支持多种样式类型和自定义配置。

功能特点

• 支持五种样式类型：默认样式、毛玻璃样式、圆形样式、浮动样式、突出样式
• 支持自定义颜色配置
• 支持安全区域适配
• 支持图标和文字的自定义配置
• 流畅的动画效果
• 完善的交互反馈

基本用法

<template>
  <tab-bar
    :current="current"
    :tabList="tabList"
    type="default"
    @change="changeTab"
  />
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabList: [
        {
          icon: 'home',
          selectedIcon: 'home-filled',
          text: '首页'
        },
        {
          icon: 'person',
          selectedIcon: 'person-filled',
          text: '我的'
        }
      ]
    }
  },
  methods: {
    changeTab(index) {
      this.current = index
    }
  }
}
</script>

样式类型

默认样式 (default)

• 简洁的底部导航栏
• 选中时图标轻微上浮并添加阴影

毛玻璃样式 (glass)

• 磨砂玻璃效果
• 渐变背景
• 选中时图标上浮并添加阴影

圆形样式 (circle)

• 圆形图标背景
• 选中时图标放大并添加阴影
• 文字大小动态变化

浮动样式 (float)

• 悬浮在底部的导航栏
• 圆角设计
• 选中时图标放大并添加阴影

突出样式 (prominent)

• 中间图标突出显示
• 中间项无文本显示
• 选中时图标上浮并添加阴影

API

Props

Events

tabList 数据结构

{
  icon: String,        // 未选中时的图标
  selectedIcon: String, // 选中时的图标
  text: String         // 显示的文本
}

注意事项

1. 图标使用 uni-icons 组件，请确保项目中已安装
2. 突出样式（prominent）建议使用奇数个 tab，中间项会自动突出显示
3. 毛玻璃样式在某些平台可能不支持，会自动降级为普通样式
4. 浮动样式会自动适配安全区域

更新日志

详见 CHANGELOG.md