更新记录

1.1.8（2026-06-24）

新增

• 自动兼容系统黑暗模式：组件内部检测，无需页面或 App 配置
• 新增深色配色 props：darkColor、darkActiveColor、darkBgColor、darkCenterIconColor、darkActiveBgColor
• 内部监听 uni.onThemeChange、uni.onAppShow、页面 pageLifetimes.show 与 H5 prefers-color-scheme

修复

• 修复传入与默认相同的浅色 props 时，切换黑暗模式不更新颜色的问题
• 修复颜色逻辑依赖内部硬编码色板、外部 props 无法完整控制的问题
• 修复小程序端 CSS 变量与 computed 动态索引样式不刷新的问题，改为 data + watcher 内联 style 字符串

说明

• 浅色用 color / activeColor / bgColor，深色用 dark* 系列 props，均可外部覆盖
• 边框、阴影、涟漪等衍生色由当前生效的主色自动推导

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(5.0)

uni-app x(5.04)

tab-bar 组件

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

功能特点

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

基本用法

<tab-bar
  v-model="current"
  :tabList="tabList"
  type="default"
/>

也支持 :current + @change 写法。

样式类型

默认样式 (default)

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

毛玻璃样式 (glass)

• 布局、间距、选中动效与 default 完全一致
• 仅背景改为半透明 + backdrop-filter 毛玻璃效果

圆形样式 (circle)

• 图标外圈常驻圆形描边，选中时描边高亮
• 不使用实心底色与底部圆点，点击反馈仍为位置涟漪

浮动样式 (float)

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

突出样式 (prominent)

• 强制要求：tabList 必须为奇数个，且不少于 3 项
• 仅中间项凸起显示，两侧为普通 Tab
• 中间按钮点击：按压缩放 + 双环扩散（内白环 / 外主题色环）
• 两侧 Tab 点击：位置涟漪反馈

API

Props

Events

tabList 数据结构

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

注意事项

1. 图标使用 uni-icons 组件，请确保项目中已安装
2. 突出样式（prominent）强制要求奇数个 Tab（≥3），且只有中间项凸起；偶数个 Tab 会自动降级为 default
3. 毛玻璃样式在某些平台可能不支持，会自动降级为普通样式
4. 浮动样式会自动适配安全区域
5. 黑暗模式：组件内部自动检测系统主题（uni.getSystemInfoSync + uni.onThemeChange + 页面 pageLifetimes.show + H5 prefers-color-scheme），无需页面或 App 额外配置；浅色/深色配色通过 props 外部传入

黑暗模式示例

<!-- 零配置：自动跟随系统深/浅色 -->
<tab-bar :tab-list="tabList" :current="current" @change="onTabChange" />

<!-- 自定义浅/深配色 -->
<tab-bar
  :tab-list="tabList"
  :current="current"
  color="#8a847c"
  active-color="#c45c26"
  bg-color="#fdfcfa"
  dark-color="#9a958d"
  dark-active-color="#e07840"
  dark-bg-color="#1c1b19"
  @change="onTabChange"
/>

更新日志

详见 CHANGELOG.md