uniapp设置tabbar底部导航栏

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

---

备注：
1.更多详见uniapp官网关于tabBar的配置说明。
2.顶部的 tabbar 目前仅微信小程序上支持，uniapp的头部导航可使用官网的uniapp导航栏组件。