uni-app iOS真机配置透明导航头会变黑色

uni-app iOS真机配置透明导航头会变黑色

示例代码：

{
    "path": "order/result",  
    "style": {  
        "navigationBarTitleText": "",  
        "backgroundColor": "#ffffff",  
        "navigationBarBackgroundColor": "transparent",  
        "app-plus": {  
            "scrollIndicator":"none"  
        }  
    }
}

操作步骤：

  • 配置navigationBarBackgroundColor值为transparent，ios运行

预期结果：

  • 显示正常

实际结果：

  • 头部全黑

bug描述：

  • 配置透明导航头部，ios真机会显示全黑的头部，之前是好的，都没注意是更新了哪个版本就不行了
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 macOS Monterey 12.2.1
HBuilderX类型 正式
HBuilderX版本 3.7.3
手机系统 iOS
手机版本号 iOS 15
手机厂商 苹果
手机机型 iphone 13pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app iOS真机配置透明导航头会变黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你记错了，导航栏透明需要设置 titleNView 样式 type = “transparent” 然后才会有渐变 backgroundColor 的效果
“style”: {
“navigationBarTitleText”: “view”,
“app-plus”: {
“titleNView”: {
“type”: “transparent”,
“backgroundColor”: “#07C160”
}
}
}

更多关于uni-app iOS真机配置透明导航头会变黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以了，谢谢！我记忆错乱了0.0

这是iOS系统在透明导航栏处理上的一个已知问题。解决方法如下：

  1. 在pages.json中配置透明导航栏时，需要同时设置以下属性：
{
  "path": "order/result",
  "style": {
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "transparent",
    "navigationBarTextStyle": "white",
    "app-plus": {
      "titleNView": {
        "type": "transparent"
      },
      "scrollIndicator": "none"
    }
  }
}
  1. 关键点：
  • 必须同时配置app-plus.titleNView.type为transparent
  • 建议设置navigationBarTextStyle确保文字颜色可见
  1. 如果仍然显示黑色，可以尝试在页面onLoad时调用：
uni.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: 'transparent'
})
回到顶部