The bottom tabbar setting in uniapp

1. Purpose: Set the bottom tabbar

Two, set tabbar

1. Configure under the page.json file

2. Tabbar is written at the same level as pages, globalStyle, etc.

3. color: default text color

selectedColor: selected text color

4. list is an array with at least 2 tabbars and at most 5 tabbars

5. 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": "我的"
        }
    ]
},

4. Results display:

5. Sharing of specific configuration items:

See the official website display:

https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar