完全自由自定义中间凸起底部tab导航

更新记录

1.0（2026-06-04）

V1.0.0（首发版本）完成中间凸起福袋样式自定义 TabBar 底部导航，5 项菜单：首页 / 剧场 / 中间福袋 / 福利 / 我的；实现 Tab 选中自动切换图标（xxx.png→xxx0.png）+ 选中文字变色逻辑； Vue3 setup 组合式 API 开发，uni-app 全端兼容：小程序 / H5/App 安卓 & iOS；内置完整演示首页，采用 v-if 动态切换页面，无需配置原生 pages 路由 tabBar； pages.json 默认关闭系统原生顶部导航、原生 tabBar，避免样式重叠冲突；配套全套图标资源，开放图标大小、导航高度、字体颜色、中间凸起距离自定义修改；适配全面屏、刘海手机底部安全区域，不会被系统栏遮挡内容；完善使用文档，快速引入即可接入自有项目。

平台兼容性

uni-app(4.76)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	-	√	-	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	-	√	√	-	-	-	-	-	-	√	√

完全自由自定义底部 Tab 导航｜中间凸起福袋版一、插件介绍 Vue3 setup 语法开发自定义底部 TabBar 导航，5 栏布局：首页、剧场、中间凸起福袋按钮、福利、我的； Tab 选中自动切换图标全端兼容：微信 / 支付宝 / 抖音等全平台小程序 + H5 + App 安卓 /iOS/ 鸿蒙 + 全品类快应用；自带完整演示页面 + 全套图标资源，开箱即用，支持自由修改导航高度、图标尺寸、文字颜色、中间凸起大小偏移。二、目录关键文件

components/qingf-tabs/qingf-tabs.vue # 核心底部导航文件(自由自定义tab导航样式) components/qingf-tabs/qingf-tabsx.vue # 核心底部辅文件(无图标版)

三、快速接入示例

// 引入组件 import tabbar from '@/components/qingf-tabs/qingf-tabs.vue' <style scoped> .container { width: 100%; height: 100vh; } </style>

四接入注意事项

static图标文件夹图片不可随意删除，否则图标丢失；