uniapp中底部tabbar设置_uni-app替换tabbar

一、目的：设置底部tabbar

二、设置tabbar

1. 在page.json文件下进行配置

2. tabbar与pages、globalStyle等同级书写

3. color：默认文字颜色

selectedColor：选中的文字颜色

4. list是数组，里面的tabbar至少2个至多5个

5. pagepath：页面的路径

iconPath：默认图标路径

selectedIconPath选中的图标路径

text文字的内容

三、代码展示：

代码：

"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://uniapp.dcloud.net.cn/collocation/pages.html#tabbar