uni原生导航栏相关设置_uni.settabbaritem

动态设置某一项内容

使用场景：不同角色显示不同导航栏或设置不同名称，不同图标
API: uni.setTabBarItem(OBJECT)

iconfont参数说明

//首先在pages.json文件tabBar中设置
{
	"pages": [{
		"path" : "pages/index",
		"style" : 
		{
			"navigationBarTitleText" : "首页",
			"enablePullDownRefresh" : false,
			"navigationStyle": "custom"
		}
	}....],
	"globalStyle": { ... },
	"tabBar": {
		"borderStyle": "white",
		"backgroundColor": "#FFF",
		"color": "#999",
		"selectedColor": "#000",
		"list": [
			{
				"pagePath": "pages/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/statistics/index",
				"text": "统计"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//index.vue首页
<script>
export default{
	data(){
		return{}
	},
	onShow(){
		/*获取用户角色，根据用户角色设置导航*/
		let userType = = uni.getStorageSync('userInfo').userType;
		/*修改第二个导航名称*/
		if( userType == 0 ){
			uni.setTabBarItem({
			  index: 1,
			  text: '圈子'
			})
		}
		/*隐藏第二个导航*/
		/*if( userType == 0 ){
			uni.setTabBarItem({
			  index: 1,
			  visible:false
			})
		}*/
		/*其他修改参照上面参数*/
	},
	methods:{}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

uni.setTabBarItem官网参考

动态设置tabBar的整体样式

API：uni.setTabBarStyle(OBJECT)

backgroundImage创建线性渐变说明

backgroundImage: linear-gradient(to top, #a80077, #66ff00);
目前暂不支持 radial-gradient（径向渐变）。
目前只支持两种颜色的渐变，渐变方向如下：
to right：从左向右渐变
to left：从右向左渐变
to bottom：从上到下渐变
to top：从下到上渐变
to bottom right：从左上角到右下角
to top left：从右下角到左上角

隐藏导航栏

API : uni.hideTabBar(OBJECT)，所有平台均支持

OBJECT参数说明

显示导航栏

API : uni.showTabBar(OBJECT)

OBJECT参数说明

为某一项右上角添加文本

API : uni.setTabBarBadge(OBJECT)

//示例
uni.setTabBarBadge({
  index: 0,
  text: '1'
})
1
2
3
4
5

移除 tabBar 某一项右上角的文本

API : uni.removeTabBarBadge(OBJECT)

显示 tabBar 某一项右上角的文本

API : uni.showTabBarRedDot(OBJECT)
参数同上

隐藏 tabBar 某一项右上角的文本

API : uni.hideTabBarRedDot(OBJECT)
参数同上

监听中间按钮点击事件

API : uni.onTabBarMidButtonTap(CALLBACK)