uni-app 苹果端通过uni.setNavigationBarColor({}) 报BUG设置背景色出现不一致情况

uni-app 苹果端通过uni.setNavigationBarColor({}) 报BUG设置背景色出现不一致情况

开发环境 版本号 项目创建方式
Mac macOS Big sur 11.2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS Big sur 11.2

HBuilderX类型：Alpha

HBuilderX版本号：3.2.0

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPhone 11 pro max

页面类型：nvue

打包方式：云端

示例代码：

//设置透明导航栏 let color = ‘rgba(0,0,0,0)’ uni.setNavigationBarColor({ frontColor: ‘#ffffff’, backgroundColor: color })

动态设置 //滚动监听 设置透明导航栏 onScroll(e) { console.log(-e.contentOffset.y) let color = ‘rgba(250,250,250,0)’ if (-e.contentOffset.y > 160) { color = ‘rgba(255, 255, 255, 1.0)’ } else { color = ‘rgba(255,255,255,’ + -e.contentOffset.y / 160 + ‘)’ } if (-e.contentOffset.y < 5) {
uni.setNavigationBarTitle({
title: ’ ’
})
uni.setNavigationBarColor({
frontColor: ‘#000000’,
backgroundColor: color
})
return;
}

uni.setNavigationBarTitle({
title: this.headerData.manage.school
})
uni.setNavigationBarColor({
frontColor: ‘#000000’,
backgroundColor: color
})
},


更多关于uni-app 苹果端通过uni.setNavigationBarColor({}) 报BUG设置背景色出现不一致情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

请上传一个完整的示例工程吧

更多关于uni-app 苹果端通过uni.setNavigationBarColor({}) 报BUG设置背景色出现不一致情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html


https://ask.dcloud.net.cn/question/128115 工程师你看看这篇帖子问题和我的一样，不用上传复现代码了。只需要第一次进入设置状态栏背景为白色，之后动态设置为黑色不生效 在苹果端。就这个问题

第一次设置这个 let color = ‘rgba(0,0,0,0)’ uni.setNavigationBarColor({ frontColor: ‘#ffffff’, backgroundColor: color }) 第二次设置这个背景色 无效就这个 切记在苹果端测试 3.2.0版本 let color = ‘rgba(0,0,0,0)’ uni.setNavigationBarColor({ frontColor: ‘#000000’, backgroundColor: color })

工程师

来个人解决啊

感谢反馈，此问题为3.2.0版本引出，已经修复，重新提交打包即可解决

在ios端onLoad中设置uni.setNavigationBarColor({ frontColor: ‘#FFFFFF’ });无效，还望官方回复

回复 害草率了: 不一样的问题请单独发帖反馈吧

这是一个iOS系统在特定场景下的渲染问题，主要与nvue页面的导航栏透明度和颜色混合机制有关。

问题核心： 在nvue页面中，当backgroundColor设置为带透明度的颜色（如rgba(255,255,255,0.5)）时，iOS系统可能会将当前颜色与之前残留的导航栏背景进行混合，导致颜色显示不一致或出现预期外的色差。

直接解决方案：

  1. 避免使用透明色：如果不需要透明效果，直接使用不透明的颜色值（如#ffffff）。
  2. 重置颜色时先设为不透明色：在动态改变颜色前，先设置为一个不透明的中间色。
    // 在设置透明色前，先重置为不透明色
uni.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff' // 先设为不透明色
});
// 再设置目标颜色（如果需要透明）
uni.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: color
});
  3. 使用纯色过渡：在滚动监听中，当透明度变化时，避免从透明直接到半透明的跳跃，可以设置一个阈值进行纯色切换。
    if (-e.contentOffset.y > 160) {
    color = '#ffffff'; // 改为纯色
} else if (-e.contentOffset.y < 5) {
    color = 'rgba(255,255,255,0)';
} else {
    // 中间范围使用不透明色或放弃渐变
    color = '#ffffff';
}
回到顶部