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	否	接口调用结束的回调函数（调用成功、失败都会执行）