### **小程序底部tabbar样式**
*****
场景：底部3个tabbar，首页、购物车、我的
>[success] 文件地址：/app.json
#### **1、修改tabbar图标**
| 图标名称 | 图标大小 | 图片地址 |
| --- | --- | --- |
| 首页 | **45*45px** | /images/nav/home-off.png |
| 首页选定 | **45*45px** | images/nav/home-on.png |
| 购物车 | **45*45px** |images/nav/cart-off.png |
| 购物车选定 | **45*45px** | images/nav/cart-on.png |
| 我的 | **45*45px** |images/nav/my-off.png |
| 我的选定 | **45*45px** | images/nav/my-on.png |
#### **2、修改tabbar样式**
>[success] 文件地址：/app.json -----> 24行
~~~
"tabBar": {
"color": "#6e6d6b", //默认文字颜色
"selectedColor": "#e64340", //选中文字颜色
"borderStyle": "white", //tabbar顶部边框颜色，只支持 white 和 black
"backgroundColor": "#fff", //tabbar的背景颜色
"box-shadow":"0 0 6px 0", //给tabbar增加阴影效果
~~~
#### **3、增加或修改tabbar**
>[success] 文件地址：/app.json -----> 30行
~~~
"list": [{
"pagePath": "pages/index/index", //点击跳转的页面链接
"iconPath": "images/nav/home-off.png", //默认的tab图标
"selectedIconPath": "images/nav/home-on.png", //选中的tab图标
"text": "首页" //tab的名称
}, {
"pagePath": "pages/shop-cart/index",
"iconPath": "images/nav/cart-off.png",
"selectedIconPath": "images/nav/cart-on.png",
"text": "购物车"
},
{
"pagePath": "pages/my/index",
"iconPath": "images/nav/my-off.png",
"selectedIconPath": "images/nav/my-on.png",
"text": "我的"
}]
~~~