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

二、效果展示uniapp设置tabbar底部导航栏_第1张图片

三、代码实现

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导航栏组件。

你可能感兴趣的:(uniapp,uni-app,javascript)