uni-app中使用底部导航栏

打开./pages.json文件

在其中找到属性tabBar 例如:

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#F8F8F8",
    "list": [
        {
            "pagePath": "pages/tabBar/component/component",
            "iconPath": "static/component.png",
            "selectedIconPath": "static/componentHL.png",
            "text": "内置组件"
        },
        {
            "pagePath": "pages/tabBar/API/API",
            "iconPath": "static/api.png",
            "selectedIconPath": "static/apiHL.png",
            "text": "接口"
        }, 
        {
            "pagePath": "pages/tabBar/extUI/extUI",
            "iconPath": "static/extui.png",
            "selectedIconPath": "static/extuiHL.png",
            "text": "扩展组件"
        }, 
        {
            "pagePath": "pages/tabBar/template/template",
            "iconPath": "static/template.png",
            "selectedIconPath": "static/templateHL.png",
            "text": "模板"
        }
    ]
}            

color	tab上的文字默认颜色
selectedColor	tab上的文字默认颜色
borderStyle	tabbar 上边框的颜色，可选值 black/white
backgroundColor	tab 的背景色
list	tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

list中的配置:

pagePath	页面路径，必须在 pages 中先定义
iconPath	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
text	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标

效果: