uni-app配置tabbar

一 点睛

当设置 position 为 top 时，将不会显示 icon。

tabBar 中的 list 是一个数组，只能配置最少2个，最多5个 tab ，tab 按数组的顺序排序。

二 代码

1 配置 pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/message/message",
            "style":{
                "navigationBarTitleText":"信息页",
                "navigationBarBackgroundColor":"#007AFF",
                "h5":{
                    "pullToRefresh":{
                        "color":"#7D26CD"
                    }
                }
            }
        },
        {
            "path": "pages/index/index"
        },
        {
            "path": "pages/contact/contact"
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "绿帽子",
        "navigationBarBackgroundColor": "#7FFF00",
        "backgroundColor": "#7CCD7C",
        "enablePullDownRefresh": true,
        "backgroundTextStyle":"light"
    },
    "tabBar":{
        "color":"#F0AD4E",
        "selectedColor":"#4CD964",
        "backgroundColor":"#007AFF",
        "borderStyle":"black",
        "list":[
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/1237644.png",
                "selectedIconPath":"static/tabs/1237719.png"
            },
            {
                "text":"信息页",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/1246271.png",
                "selectedIconPath":"static/tabs/1262419.png"
            },
            {
                "text":"我们",
                "pagePath":"pages/contact/contact",
                "iconPath":"static/tabs/1262419.png",
                "selectedIconPath":"static/tabs/1289167.png"
            }
        ]
    }
}

2 新建 contact.vue

<template>
	<view>联系我们</view>
</template>

<script>
</script>

<style>
</style>

三 效果