完全自由自定义中间凸起底部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小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	-	√	√	-	-	-	-	-	-	√	√

uniapp 中间凸起福袋底部 TabBar 导航组件，内置首页、剧场、赚钱、福利、我的 5 个内容页面，自带图标版 + 纯文字版双样式，引入即可实现 tab 点击切换页面，无需自己编写切换逻辑，开箱即用，符合 EasyCom 规范。使用教程安装插件导入后自动存放至uni_modules/qingf-tabs目录，无需手动挪动文件。页面引用（pages/index/index.vue 接入示例） vue

import qingfTabs from '@/components/qingf-tabs/qingf-tabs.vue' <style scoped> .wrap{ width:100%; height:100vh; } </style>

EasyCom 免引入写法（推荐）项目开启默认 easycom 后，页面直接写标签即可，无需 import： vue

自定义修改修改 tab 文字、图标：替换static/tab图标资源，直接修改 tabbar.vue 内文案；修改颜色、tab 高度、中间福袋大小：在组件 css 内修改对应色值与尺寸；自定义页面内容：分别编辑 Index/Video/Money/Fuli/My.vue 页面。注意事项不可删除 static 文件夹，删除图标失效；内置 5 个页面文件为组件依赖，勿随意删除。