uni-app tabbar底部导航显示问题

uni-app tabbar底部导航显示问题

重现步骤

直接用官网的登陆模板便可重现此问题

App运行环境说明

  • 手机型号: 华为6X bln-tl10
  • 适用设备: 只要是上下切换应用的手机都可以

测试视频

6 回复

可以考虑这样处理下： 在 manifest.json 源码视图中，app-plus 节点下新增 softinput 节点，然后设置 mode 为 adjustPan。
“app-plus” : {
/* 5+App特有相关 */
“softinput” : {
“mode” : “adjustPan”
},
…
} 仅安卓生效且属于应用级配置，不能单页配置。在这种模式下，软键盘弹出不会再挤压窗口大小。
但是，获取焦点的输入框位置不能在页面中太靠下，否则可能键盘弹出后遮挡住输入框。 可能需要调整下设计，或者监听下获取焦点事件，主动向上滚动下页面来处理这种场景。
补充： 打包后该设置生效，使用登录模板打包后测试有效且没有再出现闪现首页 tabbar 的情况。

更多关于uni-app tabbar底部导航显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题解决十分感谢！！！！！！！ 抱拳 流泪谢谢！！！！

回复 陈晟睿:OK

此外，这个问题在聊天页面键盘弹出的时候同样出现。我觉得应该属于一个bug吧。 这个就很难通过设计解决了。

我发现用nvue 的页面不会出现这个问题，或许是个解决办法

这是一个常见的uni-app底部导航栏(tabbar)显示问题。根据你提供的测试视频，问题表现为：

  1. 当应用切换到后台再返回时，tabbar可能会被系统导航栏覆盖
  2. 在部分Android设备上，tabbar位置会出现异常

解决方案：

  1. 在pages.json中配置tabbar时，确保添加以下参数：
"tabBar": {
  "position": "bottom",
  "custom": false
}
  1. 对于Android设备，建议在manifest.json中添加：
"plus": {
  "statusbar": {
    "immersed": false
  }
}
  1. 如果问题仍然存在，可以尝试在App.vue的onShow生命周期中强制刷新页面：
onShow() {
  uni.hideTabBar()
  uni.showTabBar()
}
回到顶部