7***@qq.com
7***@qq.com
  • 发布:2020-05-06 15:25
  • 更新:2021-04-20 10:29
  • 阅读:6270

【报Bug】uni-app V3编译器,uni.hideTabBar()不能正确隐藏底部tabbar

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

重现步骤

[步骤]
这是之前的旧项目,一直好好的,这次升级版本后使用V3编译器,结果项目tabbar页出现了这么个情况:

上面的黑条是我自己自定义的底部导航组件,在onLoad周期使用uni.hideTabBar()隐藏原生导航栏,结果第一个打开的tabbar页下面就出现了这么一段间隙,而且只有第一个打开的tabbar页有,其他tabbar页都是好的。

为了复现问题,我按照差不多的方式创建了一个测试项目(附件里),在启动页可以用switchTab和reLaunch两种方式跳转到tabbar页,tabbar页都在onLoad周期使用uni.hideTabBar()隐藏原生导航栏,并引入了自定义导航栏组件。

[结果]
测试项目在微信小程序端表现正常,APP端的问题却更加玄学了!

无论是switchTab还是reLaunch方式跳转到tabbar页,只要是第一个打开的tabbar页(无论是首页还是我的页),底部导航栏要么多出一块留白,要么短了一块(中间试过给page加过背景色,留白区域无背景色)。(偶尔会是正常,但大多数时有问题)

我在tabbar页代码里加了一段

onLoad() {  
            uni.hideTabBar()  
            const System = uni.getSystemInfoSync()  
            console.log(`屏高为${System.screenHeight}, 可用窗口高度为${System.windowHeight}`)  
        },

打印出来的数值都是正常的,但页面是不正常的(比打印结果长了或短了一节),反而让我的项目不正常了(哭)。

同时,我在“首页”加了一个按钮,reLaunch了一下首页,结果底部表现就正常了,真的是只有第一次打开的tabbar页才有问题,其他都是好的。

[期望]
uni.hideTabBar()能正确隐藏底部tabbar

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HbuilderX
[IDE版本号]
HbuilderX 2.7.0-alpha
[windows版本号]
window 10 教育版 1809(内部版本 17763.914)
[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
app
[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX创建
[编译模式说明:自定义组件模式?纯nvue模式?v3模式?]
v3模式

App运行环境说明

测试用的多台安卓手机和安卓模拟器均出现
[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]740486429

2020-05-06 15:25 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com

如果你们用的是 uni.switchTab 跳转的,建议放在 uni.switchTab回调方法里面调用 uni.hideTabBar 方法
uni.switchTab({
url:'/pages/center/index',
success:res=>{
uni.hideTabBar()
}
})

2***@qq.com

2***@qq.com

同样遇到这个问题

chenli

chenli

更新最近版本看看

  • 7***@qq.com (作者)

    问题还在,版本Hbuilder X 2.7.4-alpha

    2020-05-18 17:10

  • 739190475

    Hbuilder X 2.7.14

    ios上也出现同样问题,不过是偶尔出现

    2020-06-30 10:58

守护

守护

2.7.4.20200515-alpha下Android设备调用uni.hideTabBar()隐藏tabBar ,页面底下会就会空出一个tabBar的空白高度

如果执着

如果执着 - calm down

2.7.9.20200527 这个问题依然存在,我的是nvue页面,跳转安卓原生之后返回,uni.hideTabBar()隐藏不了tabBar,几乎百分之百会出现。不管我是在onLoad() 还是 onShow()中调用,都无法隐藏tabBar

  • 7***@qq.com (作者)

    app的vue页面是已经解决了,你的问题表现和我的还不一样,我是打开的第一个页面出错,你这可能是新问题

    2020-06-02 14:03

  • thank

    回复 7***@qq.com: 我在mounted中调用uni.hideTabBar();页面不变,只是更换显示页面的组件,也出现这种问题,请问您的解决了吗?

    2020-06-23 10:58

  • 7***@qq.com (作者)

    回复 thank: 已经解决了

    2020-06-23 11:50

  • thank

    回复 7***@qq.com: 请问您是怎么解决的呢?

    2020-06-23 14:02

  • 7***@qq.com (作者)

    回复 thank: 版本修复了啊

    2020-06-23 14:17

  • 739190475

    回复 7***@qq.com: 你ios上有这个问题吗?我是安卓上没出现,ios上出现的问题和你一模一样

    2020-06-30 15:46

  • 7***@qq.com (作者)

    回复 739190475: 没试过IOS

    2020-06-30 16:34

  • aiplat点com

    可以隐藏,就是有报错。

    2021-04-28 09:08

aiplat点com

aiplat点com - aiplat.com

隐藏成功 但是报错一堆

{errMsg: "hideTabBar:ok"}
chunk-vendors.js:28180 [Vue warn]: Error in callback for watcher "hideTabBar": "Error: $emit:fail parameter event. Expected String with value "[object CustomEvent]", got CustomEvent "

found in

---> <App>
at App.vue
warn @ chunk-vendors.js:28180
e.config.errorHandler @ chunk-vendors.js:7749
globalHandleError @ chunk-vendors.js:29439
handleError @ chunk-vendors.js:29408
run @ chunk-vendors.js:32180
flushSchedulerQueue @ chunk-vendors.js:31920
(anonymous) @ chunk-vendors.js:29549
flushCallbacks @ chunk-vendors.js:29475
Promise.then (async)
timerFunc @ chunk-vendors.js:29502
nextTick @ chunk-vendors.js:29559
queueWatcher @ chunk-vendors.js:32012
update @ chunk-vendors.js:32154
Vue.$forceUpdate @ chunk-vendors.js:31573
forceRender @ chunk-vendors.js:31251
(anonymous) @ chunk-vendors.js:31273
(anonymous) @ chunk-vendors.js:27897
(anonymous) @ index.js:1401
Promise.then (async)
(anonymous) @ index.js:1400
resolveAsyncComponent @ chunk-vendors.js:31290
createComponent @ chunk-vendors.js:30807
_createElement @ chunk-vendors.js:31029
createElement @ chunk-vendors.js:30960
vm.$createElement @ chunk-vendors.js:31101
render @ index.js:1863
Vue._render @ chunk-vendors.js:31152
updateComponent @ chunk-vendors.js:31670
get @ chunk-vendors.js:32089
Watcher @ chunk-vendors.js:32078
mountComponent @ chunk-vendors.js:31677
push../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist/vue.runtime.esm.js.Vue.$mount @ chunk-vendors.js:36181
init @ chunk-vendors.js:30723
createComponent @ chunk-vendors.js:33584
createElm @ chunk-vendors.js:33531
patch @ chunk-vendors.js:34083
Vue._update @ chunk-vendors.js:31549
updateComponent @ chunk-vendors.js:31670
get @ chunk-vendors.js:32089
Watcher @ chunk-vendors.js:32078
mountComponent @ chunk-vendors.js:31677
push../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist/vue.runtime.esm.js.Vue.$mount @ chunk-vendors.js:36181
init @ chunk-vendors.js:30723
createComponent @ chunk-vendors.js:33584
createElm @ chunk-vendors.js:33531
patch @ chunk-vendors.js:34083
Vue._update @ chunk-vendors.js:31549
updateComponent @ chunk-vendors.js:31670
get @ chunk-vendors.js:32089
Watcher @ chunk-vendors.js:32078
mountComponent @ chunk-vendors.js:31677
push../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist/vue.runtime.esm.js.Vue.$mount @ chunk-vendors.js:36181
init @ chunk-vendors.js:30723
createComponent @ chunk-vendors.js:33584
createElm @ chunk-vendors.js:33531
createChildren @ chunk-vendors.js:33659
createElm @ chunk-vendors.js:33560
patch @ chunk-vendors.js:34083
Vue._update @ chunk-vendors.js:31549
updateComponent @ chunk-vendors.js:31670
get @ chunk-vendors.js:32089
Watcher @ chunk-vendors.js:32078
mountComponent @ chunk-vendors.js:31677
push../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist/vue.runtime.esm.js.Vue.$mount @ chunk-vendors.js:36181
init @ chunk-vendors.js:30723
createComponent @ chunk-vendors.js:33584
createElm @ chunk-vendors.js:33531
patch @ chunk-vendors.js:34122
Vue._update @ chunk-vendors.js:31549
updateComponent @ chunk-vendors.js:31670
get @ chunk-vendors.js:32089
Watcher @ chunk-vendors.js:32078
mountComponent @ chunk-vendors.js:31677
push../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist/vue.runtime.esm.js.Vue.$mount @ chunk-vendors.js:36181
(anonymous) @ main.ts:54
./src/main.ts @ index.js:1290
webpack_require @ index.js:854
fn @ index.js:151
1 @ index.js:3229
webpack_require
@ index.js:854
checkDeferredModules @ index.js:46
(anonymous) @ index.js:994
(anonymous) @ index.js:997
chunk-vendors.js:7441 [system] Error: $emit:fail parameter event. Expected String with value "[object CustomEvent]", got CustomEvent
at c (chunk-vendors.js:4273)
at h (chunk-vendors.js:4307)
at Object.$emit (chunk-vendors.js:4442)
at dispatchEvent ((index):34)
at VueComponent.hideTabBar (chunk-vendors.js:20688)
at Watcher.run (chunk-vendors.js:32178)
at flushSchedulerQueue (chunk-vendors.js:31920)
at Array.<anonymous> (chunk-vendors.js:29549)
at flushCallbacks (chunk-vendors.js:29475)

1***@qq.com

1***@qq.com

iphone6s同样出现这一个问题,ios14.4版本。在标准基座失效,有遇到的吗?

1***@qq.com

1***@qq.com

hbuilderx3.1.4

1***@qq.com

1***@qq.com

刚测试了一下题主提供的test包, iphone6s,ios14.4 hbx2.1.4 还是隐藏不了

该问题目前已经被锁定, 无法添加新回复