更新记录

1.0.3（2026-05-26）

优化

1.0.2（2026-04-17）

将小程序端需自定义tabbar单独抽取到mp-tab-renderer.uvue文件里

1.0.1（2026-04-16）

1:更新自定义tabbar标题栏样式动态设置

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ √ √ √ √ √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - - -

uni-app x(4.0)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ √ √ √ √

配置项说明：

1:项目根目录必须配置 tabbar-config.uts 文件，示例内容如下：

//导入所有自定义tabbar 并注册 import Recommend from '@/pages/home/recommend.uvue' import Order from '@/pages/order/order.uvue' import Mine from '@/pages/mine/mine.uvue' import { setNavbarConfig, NavBarConfig, registerGlobalComponent, setDefaultTabItems, TabItem } from '@/uni_modules/sunrains-tabbar/types.uts'

//注册组件 registerGlobalComponent('home', Recommend) registerGlobalComponent('order', Order) registerGlobalComponent('mine', Mine)

// 2. 配置导航栏（不设置会使用默认配置） setNavbarConfig(new NavBarConfig(true, 17, 'bold', '#333333', '#ffffff', '', 56, 44))

// 3. 设置默认 Tab 列表（至少设置一个固定的，也可以全部设置，其它可通过请求服务端接口动态配置） setDefaultTabItems([ new TabItem('home', '首页', '/static/tab/main1.png', '/static/tab/main1_active.png', '@/pages/home/recommend.uvue', Recommend), new TabItem('mine', '我的', '/static/tab/main3.png', '/static/tab/main3_active.png', '@/pages/mine/mine.uvue', Mine) ])

2:pages.json配置

第一个固定写 { "path": "uni_modules/sunrains-tabbar/index", "style": { "navigationBarTitleText": "自定义tabbar", "navigationStyle": "custom" }

示例如下： { "pages": [ { "path": "uni_modules/sunrains-tabbar/index", "style": { "navigationBarTitleText": "自定义tabbar", "navigationStyle": "custom" } }, { "path": "pages/home/recommend", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/order/order", "style": { "navigationBarTitleText": "订单" } }, { "path": "pages/detail/detail", "style": { "navigationBarTitleText": "xiangqing" } } ], "globalStyle": { "backgroundColor": "#ffffff" } }

3:动态配置tabbar示例（mine.vue页面）：

import {TabItem,GLOBAL_COMPONENT_REGISTRY } from '@/uni_modules/sunrains-tabbar/utssdk/types.uts' //固定导入 function refresh() { // 可以从服务的获取数据，组装数据， 设置并刷新新的tabbar，前提 这些自定义tabbar已在 tabbar-config.uts中导入并注册 uni.$emit('refreshNewTabbar', [ new TabItem('order', '订单', '/static/tab/main2.png', '/static/tab/main2_active.png', '@/pages/order/order.uvue', GLOBAL_COMPONENT_REGISTRY.get('order')as any), new TabItem('mine', '我的', '/static/tab/main3.png', '/static/tab/main3_active.png', '@/pages/mine/mine.uvue', GLOBAL_COMPONENT_REGISTRY.get('mine') as any) ]) } <style scoped> .mine-page { background-color: #00ff00; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .page-title { font-size: 18px; color: #333; margin-bottom: 10px; } .page-desc { font-size: 14px; color: #666; } </style>

4:小程序端必须在tab-content-renderer.uvue配置，如无需小程序端可忽略

import { TabItem } from './utssdk/types.uts' // #ifdef MP-WEIXIN // 只有在小程序端才需要这些导入，App 端会自动忽略 <!--import Recommend from '@/pages/home/recommend.uvue'--> <!--import Order from '@/pages/order/order.uvue'--> <!--import Mine from '@/pages/mine/mine.uvue'--> // #endif interface Props { currentTab: string items: TabItem[] renderKey: number } defineProps() <style scoped> .renderer-wrap { width: 100%; height: 100%; } </style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...