uni-app 之设置 tabBar | 极客日志

Python

uni-app 之设置 tabBar

tabBar 是移动应用中常见的导航模式，uni-app 提供了丰富的 API 来动态控制 tabBar 的外观和行为。 1\. uni.setTabBarItem(object) 动态设置 tabBar 某一项的内容参数说明 | 属性 | 类型 | 默认值 | 必填 | 说明 | | --- | --- | --- | --- | --- | | index | number | | 是 |…

狂少发布于 2026/4/6更新于 2026/4/1821K 浏览

tabBar 是移动应用中常见的导航模式，uni-app 提供了丰富的 API 来动态控制 tabBar 的外观和行为。

1. uni.setTabBarItem(object)

动态设置 tabBar 某一项的内容

参数说明

属性	类型	默认值	必填	说明
`index`	number		是	tabBar 的哪一项，从左边算起

uni.setTabBarItem({index:0,text:"首页",iconPath:"/static/icon/home.png",selectedIconPath:"/static/icon/home-active.png",});

属性	类型	必填	说明
`color`	string	否	tab 上的文字默认颜色
`selectedColor`	string	否	tab 上的文字选中时的颜色
`backgroundColor`	string	否	tab 的背景色
`borderStyle`	string	否	tabBar 上边框的颜色，仅支持 black/white
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束的回调函数

uni.setTabBarStyle({color:"#7A7E83",selectedColor:"#007AFF",backgroundColor:"#F8F8F8",borderStyle:"black",});

属性	类型	默认值	必填	说明
`animation`	boolean	false	否	是否需要动画效果
`success`	function		否	接口调用成功的回调函数
`fail`	function		否	接口调用失败的回调函数
`complete`	function		否	接口调用结束的回调函数

// 隐藏 tabBar，带动画效果 uni.hideTabBar({animation:true,});

属性	类型	默认值	必填	说明
`animation`	boolean	false	否	是否需要动画效果
`success`	function		否	接口调用成功的回调函数
`fail`	function		否	接口调用失败的回调函数
`complete`	function		否	接口调用结束的回调函数

// 显示 tabBar，带动画效果 uni.showTabBar({animation:true,});

属性	类型	必填	说明
`index`	number	是	tabBar 的哪一项，从左边算起
`text`	string	是	显示的文本，超过 4 个字符则显示为 …
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束的回调函数

// 为第一个 tab 添加 badge uni.setTabBarBadge({index:0,text:"3",});

属性	类型	必填	说明
`index`	number	是	tabBar 的哪一项，从左边算起
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束的回调函数

// 移除第一个 tab 的 badge uni.removeTabBarBadge({index:0,});

属性	类型	必填	说明
`index`	number	是	tabBar 的哪一项，从左边算起
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束的回调函数

// 显示第一个 tab 的红点 uni.showTabBarRedDot({index:0,});

属性	类型	必填	说明
`index`	number	是	tabBar 的哪一项，从左边算起
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束的回调函数

// 隐藏第一个 tab 的红点 uni.hideTabBarRedDot({index:0,});

exportdefault{methods:{// 初始化 tabBar 样式initTabBar(){// 设置 tabBar 整体样式 uni.setTabBarStyle({color:"#7A7E83",selectedColor:"#007AFF",backgroundColor:"#FFFFFF",borderStyle:"black",});// 设置各 tab 项 uni.setTabBarItem({index:0,text:"首页",iconPath:"/static/tabbar/home.png",selectedIconPath:"/static/tabbar/home-selected.png",}); uni.setTabBarItem({index:1,text:"分类",iconPath:"/static/tabbar/category.png",selectedIconPath:"/static/tabbar/category-selected.png",}); uni.setTabBarItem({index:2,text:"购物车",iconPath:"/static/tabbar/cart.png",selectedIconPath:"/static/tabbar/cart-selected.png",}); uni.setTabBarItem({index:3,text:"我的",iconPath:"/static/tabbar/user.png",selectedIconPath:"/static/tabbar/user-selected.png",});},// 更新购物车数量显示updateCartBadge(count){if(count >0){ uni.setTabBarBadge({index:2,text: count.toString(),});}else{ uni.removeTabBarBadge({index:2,});}},// 显示消息红点showMessageDot(show){if(show){ uni.showTabBarRedDot({index:3,});}else{ uni.hideTabBarRedDot({index:3,});}},// 在特定页面隐藏 tabBarhideTabBarInPage(){ uni.hideTabBar({animation:true,});},// 返回页面时显示 tabBarshowTabBarInPage(){ uni.showTabBar({animation:true,});},},mounted(){this.initTabBar();},};

uni-app 之设置 tabBar

1. uni.setTabBarItem(object)

参数说明

示例代码

2. uni.setTabBarStyle(object)

参数说明

示例代码

3. uni.hideTabBar(object)

参数说明

示例代码

4. uni.showTabBar(object)

参数说明

示例代码

5. uni.setTabBarBadge(object)

参数说明

示例代码

6. uni.removeTabBarBadge(object)

参数说明

示例代码

7. uni.showTabBarRedDot(object)

参数说明

示例代码

8. uni.hideTabBarRedDot(object)

参数说明

示例代码

完整示例

注意事项

更多推荐文章

相关免费在线工具

uni-app 之 设置 tabBar

1. uni.setTabBarItem(object)

参数说明

示例代码

2. uni.setTabBarStyle(object)

参数说明

示例代码

3. uni.hideTabBar(object)

参数说明

示例代码

4. uni.showTabBar(object)

参数说明

示例代码

5. uni.setTabBarBadge(object)

参数说明

示例代码

6. uni.removeTabBarBadge(object)

参数说明

示例代码

7. uni.showTabBarRedDot(object)

参数说明

示例代码

8. uni.hideTabBarRedDot(object)

参数说明

示例代码

完整示例

注意事项

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

uni-app 之设置 tabBar