uni-app 在pages配置页面"navigationBarBackgroundColor": "rgba(250,250,250,0)" 更新HBUILDER后导航栏透明设置无效 3.0.7版本可以

uni-app 在pages配置页面"navigationBarBackgroundColor": “rgba(250,250,250,0)” 更新HBUILDER后导航栏透明设置无效 3.0.7版本可以

测试过的手机：

安卓华为mate30 苹果

示例代码：

{
    "style": {
        "navigationBarBackgroundColor": "rgba(250,250,250,0)",
        "navigationStyle": "custom",
        "app-plus": {
            "titleNView": {
                "type": "float"
            }
        }
    }
}

操作步骤：

任意配置一个页面的样式

{
    "style": {
        "navigationBarBackgroundColor": "rgba(250,250,250,0)",
        "navigationStyle": "custom",
        "app-plus": {
            "titleNView": {
                "type": "float"
            }
        }
    }
}

预期结果：

导航栏透明

实际结果：

导航栏白色

bug描述：

升级hbuilder之后发现 “navigationBarBackgroundColor”: “rgba(250,250,250,0)” 设置导航栏透明无效。回退到3.0.7版本正常。 我要实现的效果是，进入页面透明。通过监听onsrcll事件动态设置导航栏的透明度达到项目要求。 上一个版本可以，升级之后进入就是导航栏是白的。要滚动下再返回才会透明。

示例图片


更多关于uni-app 在pages配置页面"navigationBarBackgroundColor": "rgba(250,250,250,0)" 更新HBUILDER后导航栏透明设置无效 3.0.7版本可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在pages配置页面"navigationBarBackgroundColor": "rgba(250,250,250,0)" 更新HBUILDER后导航栏透明设置无效 3.0.7版本可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 HBuilder 版本兼容性问题。在较新版本中，navigationBarBackgroundColor 设置为透明色值 rgba(250,250,250,0) 时，页面初始化阶段可能无法正确应用透明度。

当前可用的解决方案：

  1. 使用十六进制透明色值：
{
    "style": {
        "navigationBarBackgroundColor": "#00FFFFFF",
        "navigationStyle": "custom",
        "app-plus": {
            "titleNView": {
                "type": "float"
            }
        }
    }
}
  1. 通过 CSS 动态控制： 在页面 mounted 或 onReady 生命周期中，通过 DOM 操作设置导航栏样式：
mounted() {
    // 设置导航栏透明
    let navigationBar = document.querySelector('.uni-page-head');
    if(navigationBar) {
        navigationBar.style.backgroundColor = 'rgba(250,250,250,0)';
    }
}
回到顶部