更新记录

1.0.0（2026-02-13） 下载此版本

• 首次发布
• 创意浮动式设计，悬浮于页面底部
• 毛玻璃(Glassmorphism)背景效果
• 胶囊式滑动指示器，平滑过渡动画
• iOS风格弹性缩放动画(Spring Animation)
• 支持亮色/暗黑双主题模式
• 支持数字徽标和小红点提示

平台兼容性

其他

kk-tabbar iOS风格底部导航

微信：tlzp_0630

插件信息

更新日志

• 首次发布
• 创意浮动式设计，悬浮于页面底部
• 毛玻璃(Glassmorphism)背景效果
• 胶囊式滑动指示器，平滑过渡动画
• iOS风格弹性缩放动画(Spring Animation)
• 支持亮色/暗黑双主题模式
• 支持数字徽标和小红点提示

平台兼容性

前端平台兼容性

其他特性

插件使用说明

安装方式

将 components/kk-tabbar 文件夹复制到项目的 components 目录下即可。

基础用法

<template>
  <view class="container">
    <!-- 页面内容 -->
    <view class="content">
      ...
    </view>

    <!-- 底部导航 -->
    <kk-tabbar 
      :list="tabList" 
      :current="currentTab"
      @change="onTabChange"
    ></kk-tabbar>
  </view>
</template>

<script setup lang="uts">
import kkTabbar from '@/components/kk-tabbar/kk-tabbar.uvue'

// 导航项配置（使用图片图标）
const tabList = ref([
  { 
    icon: '/static/tabbar/home.svg', 
    selectedIcon: '/static/tabbar/home-active.svg',
    text: '首页', 
    pagePath: '/pages/index/index' 
  },
  { 
    icon: '/static/tabbar/discover.svg', 
    selectedIcon: '/static/tabbar/discover-active.svg',
    text: '发现', 
    pagePath: '/pages/discover/discover' 
  },
  { 
    icon: '/static/tabbar/message.svg', 
    selectedIcon: '/static/tabbar/message-active.svg',
    text: '消息', 
    pagePath: '/pages/message/message',
    badge: 5  // 显示数字徽标
  },
  { 
    icon: '/static/tabbar/mine.svg', 
    selectedIcon: '/static/tabbar/mine-active.svg',
    text: '我的', 
    pagePath: '/pages/mine/mine',
    dot: true  // 显示小红点
  }
])

// 当前选中索引
const currentTab = ref(0)

// 切换事件
const onTabChange = (e: any) => {
  currentTab.value = e.index
  // 可以在这里进行页面跳转
  // uni.switchTab({ url: e.item.pagePath })
}
</script>

暗黑模式用法

<template>
  <kk-tabbar 
    :list="tabList" 
    :current="currentTab"
    :isDark="isDarkMode"
    activeColor="#007AFF"
    inactiveColor="#8E8E93"
    darkActiveColor="#0A84FF"
    darkInactiveColor="#98989D"
    @change="onTabChange"
  ></kk-tabbar>
</template>

<script setup lang="uts">
const isDarkMode = ref(false)

// 可以监听系统主题变化
// uni.onThemeChange((res) => {
//   isDarkMode.value = res.theme === 'dark'
// })
</script>

Props 属性说明

Events 事件说明

change 事件返回值

{
  index: 0,           // 点击的索引
  item: {             // 点击的导航项数据
    icon: '🏠',
    text: '首页',
    pagePath: '/pages/index/index'
  }
}

list 数据结构

type TabItem = {
  icon: string           // 图标路径（支持svg/png）或文字图标
  selectedIcon?: string  // 选中状态图标路径（可选，默认使用icon）
  text: string           // 文字标签
  pagePath: string       // 页面路径
  badge?: number         // 数字徽标（可选）
  dot?: boolean          // 小红点（可选）
}

图标说明

组件支持两种图标模式：

1. 图片图标（推荐）

使用 SVG 或 PNG 格式的图片作为图标，路径包含 / 时自动识别为图片模式：

{
  icon: '/static/tabbar/home.svg',
  selectedIcon: '/static/tabbar/home-active.svg',
  text: '首页'
}

2. 文字图标

使用 iconfont 字体图标或 Unicode 字符：

{
  icon: '\ue600',           // iconfont unicode
  selectedIcon: '\ue601',
  text: '首页'
}

设计特色

1. 浮动式设计

导航栏悬浮于页面底部，左右两侧留有间距，圆角设计，现代感十足。

2. 毛玻璃效果

采用 backdrop-filter: blur() 实现真实的毛玻璃模糊效果，透过导航栏可以看到下层内容的模糊影像。

3. 胶囊滑动指示器

选中项背后有胶囊形状的高亮背景，切换时会平滑滑动到新位置，使用 Spring 动画曲线。

4. 弹性缩放动画

使用 cubic-bezier(0.34, 1.8, 0.64, 1) 贝塞尔曲线，点击时图标会有明显的弹跳反馈效果。

5. 徽标与红点

支持数字徽标（badge）和小红点（dot）显示，带有精致的白色边框，适用于消息提醒等场景。

6. 完美暗黑模式

深色模式下自动调整背景透明度和颜色，保持视觉一致性。

注意事项

1. 底部占位：由于组件使用浮动定位，请在页面底部添加占位元素，避免内容被遮挡。

.bottom-placeholder {
  height: 110px; /* 浮动导航需要更多空间 */
}

2. 图标规格：建议使用 48x48 像素的 SVG 图标，保证在各种屏幕上清晰显示。

3. 页面跳转：组件只负责切换状态和触发事件，页面跳转逻辑请在 @change 事件中自行处理。

4. 背景效果：为了展示毛玻璃效果，建议页面背景使用渐变或图片。

示例项目结构

├── components/
│   └── kk-tabbar/
│       └── kk-tabbar.uvue
├── static/
│   └── tabbar/
│       ├── home.svg
│       ├── home-active.svg
│       ├── discover.svg
│       ├── discover-active.svg
│       ├── message.svg
│       ├── message-active.svg
│       ├── mine.svg
│       └── mine-active.svg
├── pages/
│   └── index/
│       └── index.uvue
└── ...

联系与反馈

如有问题或建议，欢迎在插件评论区留言反馈。

版权声明：本插件遵循 MIT 开源协议，可自由使用和修改。