tabBar 介绍
1. tabBar 就是小程序底部的导航菜单,
2. 小程序的 tabBar 使用比较简单,
3. 只需要在全局配置文件`app.json`中加上下面的配置即可
tabBar 案例
{
"tabBar": {
"color": "color",
"selectedColor": "selectedColor",
"list": [
{
"pagePath": "pagePath",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath",
"text": "text"
},
{
"pagePath": "pagePath",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath",
"text": "text"
},
]
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/83ebb030fd5a88bd3120a73cfbf29585.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4d57c60b9e1f9a5e7cd4975e86abc65d.png)
{
"pages": [
"pages/index/index",
"pages/gengduo/gengduo"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "流星的小程序",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2",
"tabBar": {
"color": "#000",
"selectedColor": "#eee",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "./images/cookbook.png",
"selectedIconPath": "./images/cookbook-active.png",
"text": "首页"
},
{
"pagePath": "pages/gengduo/gengduo",
"iconPath": "./images/menu.png",
"selectedIconPath": "./images/menu-active.png",
"text": "更多"
}
]
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e07a7932fdd411924a65ef06f556fa0.gif#pic_center)
1. pages数组中的默认页面(第一个元素)一定要出现在tabbar配置的list数组中,如果没有则底部菜单是不显示的;
2. 如果默认页面在菜单的list数组中,但是不是list数组的一个元素,那么默认页面在第一个元素,那个菜单就会被默认选中;
3. 正常来讲,pages数组中的第一个元素(页面),即菜单list数组中的第一个栏目;