做公众号选择图片的网站网站开发图书管理系统

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页面去！务必注意了！