uni-app uni.hideTabBar()和uni.showTabBar()在鸿蒙系统手机的浏览器无效

uni-app uni.hideTabBar()和uni.showTabBar()在鸿蒙系统手机的浏览器无效

产品分类：

uniapp/H5

PC开发环境操作系统：

Mac

PC开发环境操作系统版本号：

macOs Sequoia15.5

浏览器平台：

手机系统浏览器

浏览器版本：

5.1.5.301

项目创建方式：

CLI

CLI版本号：

3.0.0-4060620250520001

示例代码：

if (keyboard.height > 0) {  
  console.log('高度大于0', keyboard.height);  
  // 隐藏tabbar  
  setTimeout(() => {  
    uni.hideTabBar()  
  }, 100)  
  // nextTick(() => {  
  //   uni.hideTabBar()  
  // })  
} else {  
  console.log('高度小于等于0', keyboard.height);  
  // 显示tabbar  
  setTimeout(() => {  
    uni.showTabBar()  
  }, 100)  
  // nextTick(() => {  
  //   uni.showTabBar()  
  // })  
}

操作步骤：

if (keyboard.height > 0) {  
  console.log('高度大于0', keyboard.height);  
  // 隐藏tabbar  
  setTimeout(() => {  
    uni.hideTabBar()  
  }, 100)  
  // nextTick(() => {  
  //   uni.hideTabBar()  
  // })  
} else {  
  console.log('高度小于等于0', keyboard.height);  
  // 显示tabbar  
  setTimeout(() => {  
    uni.showTabBar()  
  }, 100)  
  // nextTick(() => {  
  //   uni.showTabBar()  
  // })  
}

预期结果：

在h5端可以正常隐藏底部导航栏

实际结果：

h5端没有正确隐藏底部导航栏

bug描述：

运行h5端使用uni.hideTaBar()没有正确隐藏底部导航栏

示例图片1 示例图片2


更多关于uni-app uni.hideTabBar()和uni.showTabBar()在鸿蒙系统手机的浏览器无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello ，我这里经过测试，能够正常隐藏，你使用的 Uniapp 依赖·版本是多少？

更多关于uni-app uni.hideTabBar()和uni.showTabBar()在鸿蒙系统手机的浏览器无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题可能是由于鸿蒙系统浏览器对uni-app的tabBar API支持不完全导致的。以下是几个可能的解决方案：

  1. 尝试使用CSS方式控制tabBar显示隐藏：
/* 在App.vue中 */
.hide-tabbar .uni-tabbar {
  display: none !important;
}
  1. 使用动态样式控制：
// 在页面中
data() {
  return {
    hideTabBar: false
  }
},
methods: {
  toggleTabBar() {
    this.hideTabBar = !this.hideTabBar
    document.querySelector('.uni-tabbar').style.display = this.hideTabBar ? 'none' : 'flex'
  }
}
  1. 检查manifest.json中的配置：
{
  "h5": {
    "tabBar": {
      "position": "bottom"
    }
  }
}
  1. 尝试使用原生DOM操作：
const tabBar = document.querySelector('.uni-tabbar')
if(tabBar) {
  tabBar.style.display = keyboard.height > 0 ? 'none' : 'flex'
}
回到顶部