uniapp配置tabbar底部导航

配置tabbar底部导航时，要注意下面两点：

• tabbar 个数：最少为2个，不超过5个。
• 在pages.json里配置，和pages同级。

tabbar配置 示例

pages.json
{
    "pages":[ //tabbar list项的pagePath，必须在pages里配置路由。
        {
            "path": "pages/component/index",
            "style": { 
                "navigationBarTitleText": "首页", //设置页面标题文字
            }
        }, {
            "path": "pages/api/login",
            "style": {
                "navigationBarTitleText": "首页", //设置页面标题文字
            }
        }
    ],
    "tabBar": {
        "color": "#7A7E83", //tab 上的文字默认颜色
        "selectedColor": "#3cc51f", //tab 上的文字选中时的颜色
        "borderStyle": "black",	//tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值	
        "backgroundColor": "#ffffff", //tab 的背景色
        "list": [{ //tab 的列表，详见 list 属性说明，最少2个、最多5个 tab	
            "pagePath": "pages/component/index", //页面路径，必须在 pages 中先定义
            "iconPath": "static/image/icon_component.png",//图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
            "selectedIconPath": "static/image/icon_component_HL.png",//选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
            "text": "组件",//tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标	
        }, {
            "pagePath": "pages/api/index",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }]
    }
}

更多详细配置文档：

list 配置文档：

tabbar优缺点

效率高。原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

不够灵活。无法根据角色权限动态渲染tabbar list列表项。这种情况需要使用自定义tabbar。

自定义tabbar

请看 uniapp 使用自定义底部导航来动态渲染tabbar导航

tabbar 事件

用于在实际项目中设置tabbar，比如有更新内容，abbar item栏显示一个小红点的信号，表示有新的内容未读。

文档：