在h5环境下底部导航栏tabBar，处于隐藏状态

[hlwen]

问题描述 [问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚] 在h5环境下底部导航栏tabBar，处于隐藏状态

复现步骤 [复现问题的步骤]

1. 编译成功后
2. 浏览器打开页面 导航栏被隐藏

[或者可以直接贴源代码，能贴文字就不要截图]

期望行为 想知道怎么配置才能显示，或者可以控制是否显示

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

System: OS: macOS 10.14.3 Shell: 3.2.57 - /bin/bash Binaries: Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node Yarn: 1.12.3 - ~/.nvm/versions/node/v10.11.0/bin/yarn npm: 6.8.0 - ~/.nvm/versions/node/v10.11.0/bin/npm npmPackages: @tarojs/async-await: ^1.2.20 => 1.2.20 @tarojs/components: ^1.2.20 => 1.2.20 @tarojs/plugin-babel: ^1.2.20 => 1.2.20 @tarojs/plugin-csso: ^1.2.20 => 1.2.20 @tarojs/plugin-sass: ^1.2.20 => 1.2.20 @tarojs/plugin-uglifyjs: ^1.2.20 => 1.2.20 @tarojs/redux: ^1.2.20 => 1.2.20 @tarojs/redux-h5: ^1.2.20 => 1.2.20 @tarojs/rn-runner: ^1.2.20 => 1.2.20 @tarojs/router: ^1.2.20 => 1.2.20 @tarojs/taro: ^1.2.20 => 1.2.20 @tarojs/taro-alipay: ^1.2.20 => 1.2.20 @tarojs/taro-h5: ^1.2.20 => 1.2.20 @tarojs/taro-swan: ^1.2.20 => 1.2.20 @tarojs/taro-tt: ^1.2.20 => 1.2.20 @tarojs/taro-weapp: ^1.2.20 => 1.2.20 @tarojs/webpack-runner: ^1.2.20 => 1.2.20 eslint-config-taro: ^1.2.20 => 1.2.20 eslint-plugin-taro: ^1.2.20 => 1.2.20 nervjs: ^1.3.12 => 1.3.12

补充信息 [可选] 昨天升级为最新开发版

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot[bot]]

CC @Littly

[Littly]

贴一下你app.js里的tabbar配置，以及当前打开的页面URL~

[Littly]

靠目前看到的信息无法判断问题原因。 可以先检查下app.js的pages配置，确保是以'/'开头。

[taro-bot[bot]]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[wb9436]

遇到同样情况，原项目更新到最新版本设置custom为false小程序可正常显示，H5版本tabbar会隐藏掉；

@Littly 升级到1.2.22后，H5版本的tabbar可以显示，但是tabbar的图片仍显示不了

[zwzy]

靠目前看到的信息无法判断问题原因。 可以先检查下app.js的pages配置，确保是以'/'开头。

问题已经解决： 需要将本地的cli也要更新到1.2.21版本 加上这两步就正常了 taro update project npm install -g @tarojs/cli

[zwzy]

遇到同样情况，原项目更新到最新版本设置custom为false小程序可正常显示，H5版本tabbar会隐藏掉；

@Littly 要把cli更新下 taro update project npm install -g @tarojs/cli

[yazakid]

tabBar: { color: "#666", selectedColor: "#b4282d", backgroundColor: "#fafafa", borderStyle: 'black', list: [{ pagePath: "pages/home/home", iconPath: "./assets/images/home.png", selectedIconPath: "./assets/images/home-active.png", text: "首页" }, { pagePath: "pages/home/home", iconPath: "./assets/images/star.png", selectedIconPath: "./assets/images/star.png", text: " tabBar" }] }

我的在H5和weapp 的情况下正常显示，在RN和alipay上隐藏了。。。

[Littly]

遇到同样情况，原项目更新到最新版本设置custom为false小程序可正常显示，H5版本tabbar会隐藏掉；

@Littly 升级到1.2.22后，H5版本的tabbar可以显示，但是tabbar的图片仍显示不了

图片的引入姿势不是这样的。https://nervjs.github.io/taro/docs/static-reference.html

[wb9436]

遇到同样情况，原项目更新到最新版本设置custom为false小程序可正常显示，H5版本tabbar会隐藏掉； @Littly 升级到1.2.22后，H5版本的tabbar可以显示，但是tabbar的图片仍显示不了

图片的引入姿势不是这样的。https://nervjs.github.io/taro/docs/static-reference.html

调整成这样引用，H5没问题，小程序没法正常显示

没懂哪里处理的问题，求大神指教一下

[Littly]

@wb9436 抱歉 没看清你的使用场景 tabbar中的图片使用相对路径是ok的 https://github.com/NervJS/taro/issues/877#issuecomment-431034450

想知道你在tabbar中使用相对路径时，h5编译后生成的 .temp/app.js 文件中，tabbar配置变成了什么样？

[wb9436]

@wb9436 抱歉 没看清你的使用场景 tabbar中的图片使用相对路径是ok的 #877 (comment)

想知道你在tabbar中使用相对路径时，h5编译后生成的 .temp/app.js 文件中，tabbar配置变成了什么样？

大神能提供个带tabbar配置的简单demo吗，我这现在是二者不可兼得

[huayezhiwu]

@wb9436 抱歉 没看清你的使用场景 tabbar中的图片使用相对路径是ok的 #877 (comment)

想知道你在tabbar中使用相对路径时，h5编译后生成的 .temp/app.js 文件中，tabbar配置变成了什么样？

tabBar: { custom: true, color: "#626567", selectedColor: "#2A8CE5", backgroundColor: "#FBFBFB", borderStyle: "white", list: [{ pagePath: "/pages/index/index", text: "列表", iconPath: require("././asset/images/index.png"), selectedIconPath: require("././asset/images/index_focus.png") }, { pagePath: "/pages/more/more", text: "我的", iconPath: require("././asset/images/burger.png"), selectedIconPath: require("././asset/images/burger_focus.png") }], mode: "hash", basename: "/", customRoutes: {} }

大神，我这里遇到同样的问题（tabbar无法在h5端展示，其它端都可以。我的cli版本是1.3.0-beta.4。已经做了配置custom:false,但是不论是false还是true,tabbar都不展示），这是h5编译后生成的 .temp/app.js 文件中，tabbar的配置。

[taro-bot[bot]]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[xiaolshi]

哈哈，我最新的2.2.9 h5的也不显示，刚用taro发现一堆问题，决定弃坑了，所有跨端开发都不靠谱

[toFrankie]

靠目前看到的信息无法判断问题原因。 可以先检查下app.js的pages配置，确保是以'/'开头。

如果以 / 开头，就会报错：

如何怎么解决？编译为 H5 时，来回切换页面偶尔会隐藏 TabBar，不是 100% 复现，但存在一定几率会出现。