uni-app 3.4.4版本，IOS下Tabbar位置错乱了

uni-app 3.4.4版本，IOS下Tabbar位置错乱了

3.4.4，Tabbar位置错乱了，IOS下

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220404/b0d8b5620f2aea77daeab39586fd884b.png)

### 相关链接 ：

- [https://ask.dcloud.net.cn/question/142685](https://ask.dcloud.net.cn/question/142685)
3 回复

已反馈给相关人员排查，已加分，感谢您的反馈！

更多关于uni-app 3.4.4版本，IOS下Tabbar位置错乱了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX 3.4.5+ 版本已修复此问题

在 uni-app 3.4.4 版本中，如果你在 iOS 设备上遇到 Tabbar 位置错乱的问题，可能是由于以下原因导致的：

1. iOS 安全区域适配问题

iOS 设备（尤其是带有刘海屏的设备）需要处理安全区域（Safe Area）的适配。如果未正确处理，可能会导致 Tabbar 位置错乱。

解决方案：

  • 在 pages.json 中，确保为 Tabbar 页面启用了 safeArea 配置：
    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "safeArea": {
            "bottom": {
              "offset": "auto"
            }
          }
        }
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户"
      }
    ]
  }
}
  • 如果你使用的是自定义 Tabbar，确保在 CSS 中正确处理安全区域：
    .tabbar {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}

2. CSS 样式问题

Tabbar 的样式可能受到 CSS 影响，导致位置错乱。

解决方案：

  • 检查 Tabbar 的 CSS 样式，确保没有错误的 position、margin 或 padding 设置。
  • 确保 Tabbar 的 position 设置为 fixed，并且 bottom 为 0：
    .tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

3. uni-app 版本问题

uni-app 3.4.4 可能存在一些已知的 Bug，导致 Tabbar 在 iOS 上显示异常。

解决方案：

  • 尝试升级到最新版本的 uni-app，查看问题是否解决。
  • 如果无法升级，可以尝试使用 uni-app 提供的 uni.setTabBarStyle 方法动态调整 Tabbar 的样式：
    uni.setTabBarStyle({
  backgroundColor: '#ffffff',
  borderStyle: 'white',
  selectedColor: '#007AFF',
  color: '#8A8A8A'
});
回到顶部