uniapp设置tabbar底部导航栏

风筝风

已于 2023-01-17 17:17:10 修改

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app javascript

于 2023-01-17 17:13:46 首次发布

本文链接：https://blog.csdn.net/qq_42376600/article/details/128714682

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了uniapp中如何在pages.json配置tabBar，详细讲解了tabBar的常用属性和代码实现，展示了配置后的效果，并提供了配置示例。特别提示，顶部tabbar目前仅在微信小程序上支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp在 pages.json 中提供 tabBar 配置。
本文记录日常配置tabbar中的主要属性和代码实现

一、常用属性及说明

属性	类型	必填	描述
color	HexColor	是	tab 上的文字默认颜色
selectedColor	HexColor	是	tab 上的文字选中时的颜色

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
list的常用属性如下：

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

二、效果展示

三、代码实现

pages.json

"tabBar": {
		"color": "#BBBAC7", 
		"selectedColor": "#2c2c2c", 
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/tabbar/index/index",
				"iconPath": "/static/tabbar/index1.png",
				"selectedIconPath": "/static/tabbar/index1_selected.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/tabbar/learn/learn",
				"iconPath": "/static/tabbar/learn.png",
				"selectedIconPath": "/static/tabbar/learn_selected.png",
				"text": "学习"
			},
			{
				"pagePath": "pages/tabbar/home/home",
				"iconPath": "/static/tabbar/home.png",
				"selectedIconPath": "/static/tabbar/home_selected.png",
				"text": "我的"
			}
		]
	}