uniapp tabbar配置

配置基本tabbar

uniapp官网配置tabbar

属性	类型	必填	默认值	描述	平台差异说明
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

position的默认值可以看出是底部的tabbar

属性	类型	必填	默认值	描述	平台差异说明
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

list数组里的每一项就是来配置每一个tabbar具体的表现的

list里面可以配置什么

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在page中先定义
text	String	是	tab上按钮文字,在5+APP和H5平台作为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径,icon大小限制为40kb,建议尺寸为81px*81px，当postion为top时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径,icon大小限制为40kb,建议尺寸为81px*81px,当postion为tio时，此参数无效

配置一个基本的tabbar:

src > pages.json

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/message/message"
		},
		{
			"path": "pages/player/player"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/selectHome.png"
			},
			{
				"text": "信息",
				"pagePath": "pages/message/message",
				"iconPath": "static/images/message.png",
				"selectedIconPath": "static/images/selectMessage.png"
			}
		]
	}
}

这样就实现了最基本的tabbar

tabbar常用的属性

color

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab上的文字默认颜色

RGB颜色查询对照表

selectedColor

属性	类型	必填	默认值	描述	平台差异说明
selectedColor	HexColor	是		tab上文字选中时的颜色

backgroundColor

属性	类型	必填	默认值	描述	平台差异说明
backgroundColor	HexColor	是		tab背景颜色

borderStyle

属性	类型	必填	默认值	描述	平台差异说明
borderStyle	String	否	black	tabbar上边框颜色，仅支持black/white	App 2.3.4+支持其他颜色值

position

属性	类型	必填	默认值	描述	平台差异说明
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持