uni原生导航栏相关设置

动态设置某一项内容

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

属性	类型	默认值	必填	说明
index	number	无	是	tabBar的哪一项，从左边算起（从0开始）
text	String	无	否	tab上的按钮文字
iconPath	String	无	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台暂不支持网络图片
selectedIconPath	String	无	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
pagePath	String	无	否	页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转）
visible	Boolean	true	否	该项是否显示
iconfont	Object	无	否	字体图标，优先级高于 iconPath
success	Funtion	无	否	接口调用成功的回调函数
fail	Funtion	无	否	接口调用失败的回调函数
complete	Funtion	无	否	接口调用结束的回调函数（调用成功、失败都会执行）

iconfont参数说明

属性	类型	说明
text	String	字库 Unicode 码
selectedText	String	选中后字库 Unicode 码
fontSize	String	字体图标字号（px）
color	String	字体图标颜色
selectedColor	String	字体图标选中颜色

//首先在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": "我的"
			}
		]
	}
}

//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>

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参数说明

参数	类型	默认值	必填	说明
animation	boolean	false	否	是否需要动画效果，仅微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持
success	Funtion	无	否	接口调用成功的回调函数
fail	Funtion	无	否	接口调用失败的回调函数
complete	Funtion	无	否	接口调用结束的回调函数（调用成功、失败都会执行）

显示导航栏

API : uni.showTabBar(OBJECT)

OBJECT参数说明

参数	类型	默认值	必填	说明
animation	boolean	false	否	是否需要动画效果，仅微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持
success	Funtion	无	否	接口调用成功的回调函数
fail	Funtion	无	否	接口调用失败的回调函数
complete	Funtion	无	否	接口调用结束的回调函数（调用成功、失败都会执行）

为某一项右上角添加文本

API : uni.setTabBarBadge(OBJECT)

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
text	String	是	显示的文本，不超过 3 个半角字符
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

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

API : uni.removeTabBarBadge(OBJECT)

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
text	String	是	显示的文本，不超过 3 个半角字符
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

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

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

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

监听中间按钮点击事件

API : uni.onTabBarMidButtonTap(CALLBACK)