### **小程序底部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": "我的"
}]
~~~