1. Purpose: Set the bottom tabbar
![](https://img-blog.csdnimg.cn/img_convert/d3fd1e53181f3271ad70017bf5a761fc.png)
Two, set tabbar
Configure under the page.json file
Tabbar is written at the same level as pages, globalStyle, etc.
color: default text color
selectedColor: selected text color
list is an array with at least 2 tabbars and at most 5 tabbars
pagepath: the path of the page
iconPath: default icon path
selectedIconPath selected icon path
text content
3. Code display:
code:
"tabBar": {
"color": "#000000",
"selectedColor": "D81E06",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png",
"text": "消息"
},
{
"pagePath": "pages/list/list",
"iconPath": "static/tabbar/cate.png",
"selectedIconPath": "static/tabbar/cate-active.png",
"text": "列表"
},
{
"pagePath": "pages/shopCart/shopCart",
"iconPath": "static/tabbar/cart.png",
"selectedIconPath": "static/tabbar/cart-active.png",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my-active.png",
"text": "我的"
}
]
},
![](https://img-blog.csdnimg.cn/img_convert/f673a1c0bb005021e5fb8406a98c7c88.png)
4. Results display:
![](https://img-blog.csdnimg.cn/img_convert/f3bee7be26db182a0be06389e7742c02.png)