tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。 Tips

  • 属性说明： 其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

    tabbar常见问题

  • 接口-界面-tabbar，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。
  • 页面生命周期的onTabItemTap。
  • uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type=”switchTab”
  • —window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(—window-bottom) + 10px)
  • 参考。可跨端，但+号不凸起。
  • 参考。H5端可使用view自绘。
  • 插件市场搜索tabbar有不少类似例子。
  • 详见manifest配置
  • 底部原生图标分享菜单例子
  • 详见代码示例
    1. "tabBar": {    "color": "#7A7E83",    "selectedColor": "#3cc51f",    "borderStyle": "black",    "backgroundColor": "#ffffff",    "list": [{        "pagePath": "pages/component/index",        "iconPath": "static/image/icon_component.png",        "selectedIconPath": "static/image/icon_component_HL.png",        "text": "组件"    }, {        "pagePath": "pages/API/index",        "iconPath": "static/image/icon_API.png",        "selectedIconPath": "static/image/icon_API_HL.png",        "text": "接口"    }]}