更新记录

1.0.0（2026-09-28） 下载此版本

• 初始版本
• 外凸圆弧坡（raised-cosine）与栏体零斜率相切交融
• 选中项弹性滑动过渡，支持跨页面切换动画
• 两端槽位坡面自适应收窄
• 全量 CSS 变量主题，theme prop 一行覆盖
• 安全区避让、单色 SVG mask 图标 ×5

平台兼容性

uni-app(3.8.6)

uni-app x(3.8.5)

其他

cs-animated-tabbar 动画凸起自定义 TabBar

纯 CSS 变量驱动的自定义底部导航栏组件。选中项带外凸圆弧坡(dome)凸起,坡面采用 raised-cosine 曲线与栏体顶边零斜率相切,平滑交融无接缝;切换时凸起整体弹性滑动跟随选中项(含跨页面切换动画),滑到两端时坡面自适应收窄、不影响样式。

效果截图/录屏:请自行替换本目录 screenshots/(市场提交要求至少 3 张 750px 宽截图)

特性

• 🎨 全 CSS 变量主题:颜色、高度、圆角、坡形、动画时长等 16 个变量,通过 theme prop 一行覆盖
• 🏄 外凸圆弧坡:与 tabbar 同色 drop-shadow 跟随合成轮廓,白色/深色页面均自然一体
• 🧈 弹性过渡:cubic-bezier(.34,1.56,.64,1) 回弹缓动,图标上浮缩放、圆底弹出、颜色渐变
• 🔀 跨页滑动动画:切页后凸起从上一个选中项位置滑动到新位置,而非"瞬移"
• 📐 两端自适应:选中第 1/最后一项时坡面自动收窄,始终完整留在栏体内
• 📱 安全区适配:env(safe-area-inset-bottom) 自动避让
• 🖼 单色 SVG 图标(mask 方案),选中平滑变色,零图片资源依赖

平台兼容性

依赖 CSS 特性:clip-path: polygon、mask-image(data-uri svg)、CSS 自定义属性、calc()、filter: drop-shadow。

安装

方式一:HBuilderX 中通过插件市场导入(uni_modules 自动注册 easycom)。

方式二:复制 uni_modules/cs-animated-tabbar 到你的项目 uni_modules 目录。

使用

1. pages.json 注册 tabBar(用于 uni.switchTab)

{
  "tabBar": {
    "list": [
      { "pagePath": "pages/home/home", "text": "首页" },
      { "pagePath": "pages/message/message", "text": "消息" }
    ]
  }
}

2. 隐藏原生 tabBar

// App.vue
export default {
  onLaunch() {
    uni.hideTabBar({ animation: false })
  },
}

// 每个 tab 页面的 onShow 中再次隐藏(switchTab 后原生栏会重新显示)
export default {
  onShow() {
    uni.hideTabBar({ animation: false })
  },
}

3. 页面中放置组件(easycom 免 import)

<template>
  <view class="page">
    <!-- 页面内容 -->
    <custom-tabbar :current="0" :tabs="tabs" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/pages/home/home', icon: 'home' },
        { path: '/pages/message/message', icon: 'mail' },
        { path: '/pages/publish/publish', icon: 'chat' },
        { path: '/pages/contacts/contacts', icon: 'heart' },
        { path: '/pages/mine/mine', icon: 'person' },
      ],
    }
  },
}
</script>

页面底部请预留 padding-bottom: 260rpx 左右的空间,避免内容被悬浮栏遮挡。

Props

CSS 变量(theme 可覆盖项)

主题示例

<!-- 深色栏 + 蓝色圆钮 -->
<custom-tabbar
  :current="0"
  :tabs="tabs"
  :theme="{
    '--tb-bg': '#1f2937',
    '--tb-color': '#9ca3af',
    '--fab-a': '#38bdf8',
    '--fab-b': '#2563eb',
    '--fab-glow': 'rgba(37, 99, 235, .55)',
  }"
/>

注意事项

1. 组件为悬浮式导航栏(左右 24rpx 边距 + 底部间隙 + 圆角),如需贴边通栏,可在自定义样式中覆盖 .ctb 的 left/right/bottom(注意 scoped 需用 ::v-deep)或直接改组件源码。
2. --dome-w / --inset 被覆盖时,两端适配的坡面缩放会自动跟随计算。
3. 凸起坡面高度需大于圆钮半径,否则选中项会露出坡外;建议 --dome-h ≥ --fab-size / 2 - 10rpx。
4. 内置图标为 5 个单色 SVG(mask),如需更多图标可在 custom-tabbar.vue 样式区按 .ic-xxx { mask-image: url("data:image/svg+xml,...") } 格式自行扩展。
5. 跨页滑动动画依赖模块级单例记录上一次索引(common/tabbar-anim.js),无需额外配置。

示例

完整示例见本插件目录同级示例工程(提交市场时附 demo 工程 zip):5 个 tab 页演示默认主题与自定义主题。

许可

MIT