3.2.5 tabBar-pages.json-常用配置【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】

3.2.5 tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
注意事项：
 当设置 position 为 top 时，将不会显示 icon
 tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
 tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
 tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
 顶部的 tabbar 目前仅微信小程序上支持，需要用到顶部选项卡的话，参考 hello uni-app->模板->顶部选项卡。

属性说明：


midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap。

tabbar常见问题

 tabbar 的 js api 见接口-界面-tabbar，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。
 tabbar 的 item 点击事件见页面生命周期的onTabItemTap。
 代码跳转到tabbar页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type=“switchTab”
 tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量–window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(–window-bottom) + 10px)
 中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。
 如需 tabbar 中间凸起，可自定义tabbar，插件市场有例子，如colorUI等。但注意前端tabbar的性能不如原生tabbar，如果是多页方式，底部tabbar会在切换时闪执行转场动画，如果是单页方式，承载复杂页面内容会有性能问题。插件市场搜索tabbar有不少类似例子。
 App端若使用nvue，自定义tabbar，没有性能体验问题。
 纯nvue项目（manifest里renderer为native），目前使用pages.json里的tabbar反而影响性能，建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
 Android App上弹出键盘顶起tabbar的问题。如果是搜索框，建议点击后新开页面搜索（hello uni-app有例子）；也可以配置 manifest.json 中 app-plus->softinput->mode 设置为 adjustPan，注意从HBuilderX 2.2开始，默认就是adjustPan，请不要手动改为adresize。另外修改输入法弹出模式需打包后生效。详见manifest配置；也可以动态隐藏tabbar。
 原生的tabbar只有一个且在首页。二级页的tab，前端自己实现。
 如果是需要先登录、后进入tab页面，不需要把登陆页设为首页，首页仍然是tabbar页，可参考HBuilderX新建uni-app项目时的登陆模板
 前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可参考这个底部原生图标分享菜单例子
 微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。详见

代码示例

"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": "接口"
    }]
}

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）计算机编程资料 http://www.pc-365.net www.4317.org
http://www.05423.com/