uni-app 设置tabbar后 页面透明背景色在IOS出现半屏白色问题 VUE NVUE均有

uni-app 设置tabbar后 页面透明背景色在IOS出现半屏白色问题 VUE NVUE均有

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 windows 10 专业版
HBuilderX类型 正式
HBuilderX版本 3.4.11
手机系统 Android
手机系统版本 Android 11
手机厂商 iphone 苹果
手机机型 苹果xr
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

创建一个demo 创建两个页面 配置tabbar 另外创建一个页面设置页面背景色透明 当在IOS打开该页面时就会出现一半是白色 一半是透明的情况

预期结果：

配置有tabbar时 页面设置透明背景 在IOS上不会出现一半白 一半透明的情况

实际结果：

配置有tabbar时 页面设置透明背景 在IOS上出现一半白 一半透明的情况

bug描述：

当APP配置了tabbar的时候 任何一个页面设置全透明背景 在IOS会出现半屏白色 无法透明 此BUG在VUE NVUE都能复现
附上插件市场demo https://ext.dcloud.net.cn/plugin?id=5839此demo为要实现的效果 但是只要在项目当中配置了tabbar导航栏就会出现上述问题

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220523/60daa2e4e0c819b05e06b2d137fc8474.jpg


更多关于uni-app 设置tabbar后 页面透明背景色在IOS出现半屏白色问题 VUE NVUE均有的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

解决了 ，你看pages.json中是不是设置了
“backgroundColorTop”: “#ffffff”, //ios
“backgroundColorBottom”: “#ffffff” //ios 跟tabbar没太大关系 去掉就正常了，这东西折磨了我两天

更多关于uni-app 设置tabbar后 页面透明背景色在IOS出现半屏白色问题 VUE NVUE均有的实战教程也可以访问 https://www.itying.com/category-93-b0.html


确实 我也遇到了，不过是有tabbar的时候整个背景都是白色，把tabbar注释了，就成了上半屏白色

在使用 uni-app 开发时，设置 tabBar 后，页面背景色在 iOS 设备上出现半屏白色的问题，通常是由于 iOS 系统的默认行为导致的。以下是一些可能的解决方案：

1. 设置页面背景色

确保每个页面的背景色都明确设置，避免使用透明背景。可以在 App.vue 或每个页面的样式中设置全局背景色。

/* App.vue */
page {
  background-color: #ffffff; /* 设置为你需要的背景色 */
}

2. 使用 nvue 页面

如果你使用的是 nvue 页面，确保在 nvue 页面中也设置了背景色。

/* nvue 页面 */
.container {
  background-color: #ffffff; /* 设置为你需要的背景色 */
}

3. 检查 tabBar 配置

确保 tabBar 的配置正确，特别是 backgroundColor 和 borderStyle 属性。

{
  "tabBar": {
    "backgroundColor": "#ffffff", // 设置为你需要的背景色
    "borderStyle": "black" // 或者 "white"，根据你的需求
  }
}

4. 使用 page-meta 组件

在页面中使用 page-meta 组件来设置页面的背景色。

<template>
  <page-meta :background-color="'#ffffff'"></page-meta>
  <!-- 页面内容 -->
</template>

5. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app，因为旧版本可能存在一些已知的 bug。

6. 使用 uni.setNavigationBarColor

如果你需要动态设置导航栏颜色，可以使用 uni.setNavigationBarColor 方法。

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景色
  backgroundColor: '#000000' // 背景色
});

7. 检查 manifest.json 配置

在 manifest.json 中检查 app-plus 配置，确保没有设置透明背景。

{
  "app-plus": {
    "background": "#ffffff" // 设置为你需要的背景色
  }
}

8. 使用 uni.setTabBarStyle

如果你需要动态设置 tabBar 样式，可以使用 uni.setTabBarStyle 方法。

uni.setTabBarStyle({
  backgroundColor: '#ffffff', // 设置为你需要的背景色
  borderStyle: 'black' // 或者 "white"，根据你的需求
});

9. 检查 pages.json 配置

在 pages.json 中检查每个页面的配置，确保没有设置透明背景。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "backgroundColor": "#ffffff" // 设置为你需要的背景色
      }
    }
  ]
}

10. 使用 uni.setBackgroundColor

如果你需要动态设置页面背景色，可以使用 uni.setBackgroundColor 方法。

uni.setBackgroundColor({
  backgroundColor: '#ffffff' // 设置为你需要的背景色
});
回到顶部