uni-app配置tabBar

最新推荐文章于 2025-12-02 13:33:23 发布

原创最新推荐文章于 2025-12-02 13:33:23 发布 · 1.5w 阅读

6 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

8 篇文章

订阅专栏

本文档介绍了如何使用uni-app配置底部tabBar，包括配置选项和实际使用案例，帮助开发者更好地组织和管理APP的不同功能页面。

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": "我的"
		}
	]
}