微信小程序tabBar的基本设置

app.json

 当我们想要在小程序中实现下面的效果的时候，可以使用tabBar

从图片中可以看到tab的结构：

1、3个可选的tab：

list: 使用tabBar对象中的list对象数组属性来控制，list数组中的每个元素（对象）,

{
    "pages": [
        "pages/index/index",
        "pages/publish/index",
        "pages/user/index"
    ],
    "tabBar": {
        "color": "#dddddd",
        "selectedColor": "#16f2e7",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "找房",
                "iconPath": "static/image/icon_home_u.png",
                "selectedIconPath": "static/image/icon_home_a.png"
            },
            {
                "pagePath": "pages/publish/index",
                "text": "发布房源",
                "iconPath": "static/image/icon_release_u.png",
                "selectedIconPath": "static/image/icon_release_a.png"
            },
            {
                "pagePath": "pages/user/index",
                "text": "我的",
                "selectedIconPath": "static/image/icon_user_a.png",
                "iconPath": "static/image/icon_user_u.png"
            }
        ]
    },
    "component": true,
    "usingComponents": {}
}

---

2.选项底部文案：

text：可以用来描述选项卡文案

---

3、当选中的时候icon动态发生变化：

iconPath：未选中时默认的icon图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px

selectedIconPat：选中后更换的icon图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px

---

4、字体选中、未选中的时候动态变化：

color：默认的tab字体颜色

selectedColor：选中后的字体颜色

---

5、选中不同的tab切换不同的页面：

pagePath：页面路径

---

6.tabBar上边框的颜色：

borderStyle：仅支持black、white，默认black

---

7.tabBar背景颜色：backgroundColor

---

 

color、selectedColor、backgroundColor：仅支持16六进制的颜色表示方法，如（#ffffff）