更新记录

1.0.0（2025-03-20）

• 新增 tab-bar 组件

平台兼容性

tab-bar

现代化底部导航栏组件

介绍

一个基于 uni-app 的现代化底部导航栏组件，采用 Google Material Design 设计风格，配合精美的毛玻璃效果，提供出色的视觉体验。

特性

• 🎨 现代毛玻璃设计
• 🌈 优雅的动画过渡
• 📱 完美支持 iPhone 安全区域
• 💪 跨平台兼容（H5、App、小程序）
• 🎯 精确的视觉反馈
• ✨ 精致的视觉细节

使用方法

安装依赖

本组件依赖 uni-icons 组件，请确保项目中已安装：

1. 在插件市场打开 uni-icons
2. 点击"使用 HBuilderX 导入插件"
3. 或者点击"下载插件ZIP"，解压到项目的 uni_modules 目录

引入组件

<tab-bar 
  :current="current" 
  :tab-list="tabList" 
  @change="handleChange"
/>

配置参数

data() {
  return {
    current: 0,
    tabList: [
      {
        text: '首页',
        icon: 'home',            // uni-icons 的图标名
        selectedIcon: 'home-filled'  // 选中时的图标名
      },
      {
        text: '分析',
        icon: 'chart',
        selectedIcon: 'chart-filled'
      },
      // ... 更多选项
    ]
  }
}

可用图标

组件使用 uni-icons 图标库，以下是推荐的图标搭配：

更多图标请参考 uni-icons 文档

API

Props

tabList 项配置

Events

样式定制

组件采用 SCSS 编写，主要样式变量：

// 主题色
$primary-color: #018786;

// 文字颜色
$text-color: rgba(0, 0, 0, 0.65);

// 选中状态背景
$active-bg: rgba(1, 135, 134, 0.08);

平台差异说明

H5/小程序

• 自动适配底部安全区域
• 支持毛玻璃效果

App

• 根据机型自动调整底部间距
• 完整支持所有动画效果

更新日志

1.0.0

• 全新的毛玻璃视觉设计
• 优化动画过渡效果
• 改进跨平台兼容性
• 完善底部安全区域适配