uniapp开发09-设置一个tabbar底部导航栏且配置icon图标

uniapp开发09-设置一个tabbar底部导航栏且配置icon图标！在实际项目开发中，经常会遇到需要设置icon图标的情况，而且底部导航通常都是有固定位置且内容不会轻易发生变化的。官方提供了自带的tabbar组件。我们来了解一下最基础的入门案例。

1：先看代码，和实际效果图

复制代码

	"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "/static/images/tabbar/首页.png",
				"selectedIconPath": "/static/images/tabbar/首页-h.png"
			},
			{
				"text": "列表",
				"pagePath": "pages/list/list",
				"iconPath": "/static/images/tabbar/信息.png",
				"selectedIconPath": "/static/images/tabbar/信息-h.png"
			},
			{
				"text": "我的",
				"pagePath": "pages/about/about",
				"iconPath": "/static/images/tabbar/我的.png",
				"selectedIconPath": "/static/images/tabbar/我的-h.png"
			}
		]
	}

2：效果图展示：

如图所示，底部tabbar导航栏信息可以正常显示！而且我是配置了一个简单的颜色切换icon图标配图的。

自己没有icon图标素材的朋友们，可以去官方网站下载（需要注册登录才能下载）；地址入口：www.iconfont.cn

内容写起来很快，因为HbuildX会自动提示你！自动配齐标签内容。你需要提前输入双引号！在双引号内输入简单的单词开头几个字母，环境就会自动帮你提示！大大提升开发效率。

声明：默认情况下，navigator这种跳转页面的情况是仅仅是跳转到非Tabbar页面！也就是说，你想跳转到这种一级入口页面的话，需要设置参数：open-type:reLaunch；

只有带着这个参数值，才能实现正常的跳转到tabbar页面去！务必注意了！