uni-app配置tabBar

1 引言

想要开发一个深入人心的APP，那么首先得有一些实实在在的功能，而这些功能一般都是有一个或多个页面所组成，所以，为了组织管理不同功能的页面，我们引入了tabBar（也是底部多功能选项卡），本次笔者记录使用uni-app配置tabbar的过程，没有多大的难度，所以只要细心阅读一下官方文档就no problem。

2 配置选

https://uniapp.dcloud.io/collocation/pages?id=tabbar

2.1 tabBar可配置的属性 

2.2 tabBar中的list的可配置属性

 

3 使用案例

"tabBar": {
	"color": "#999999",
	"selectedColor": "#e34969",
	"borderStyle": "black",
	"backgroundColor": "#FFFFFF",
	"iconWidth": "24px",
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabbar/index1.png",
			"selectedIconPath": "static/tabbar/index2.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/find/find",
			"iconPath": "static/tabbar/find1.png",
			"selectedIconPath": "static/tabbar/find2.png",
			"text": "推荐"
		},
		{
			"pagePath": "pages/my/my",
			"iconPath": "static/tabbar/my1.png",
			"selectedIconPath": "static/tabbar/my2.png",
			"text": "我的"
		}
	]
}