uniapp开发报错[Vue warn]: Invalid prop: custom validator check faile
最近在【wow程序员】（https://www.wowcoder.net/）上所众包接单【微信小程序开发】项目，需求首页需要沉浸式的背景色和导航一起，看起来大气。然后给首页加了背景但是首页字体就是黑色，需要改成白色。自然就是"navigationBarTextStyle": "#fffff", // 顶部文字颜色这样改了。然后就发现就报错如下“[Vue warn]: Invalid prop: custom validator check failed for prop "navigationBarTextStyle".”
然后通过查文档发现，只支持字符串的仅支持 black/white值。
官网技术文档https://uniapp.dcloud.net.cn/collocation/pages.html#style 顺便贴下支持的参数
页面中配置项会覆盖 globalStyle 中相同的配置项
属性 |
类型 |
默认值 |
描述 |
平台差异说明 |
|---|---|---|---|---|
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色（同状态栏背景色），如"#000000" |
|
navigationBarTextStyle |
String |
white |
导航栏标题颜色及状态栏前景颜色，仅支持 black/white |
|
navigationBarTitleText |
String |
导航栏标题文字内容 |
||
navigationBarShadow |
Object |
导航栏阴影，配置参考下方 导航栏阴影 |
||
navigationStyle |
String |
default |
导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意 |
微信小程序 7.0+、百度小程序、H5、App（2.0.3+） |
disableScroll |
Boolean |
false |
设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效 |
微信小程序（iOS）、百度小程序（iOS） |
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
微信小程序、百度小程序、字节跳动小程序、飞书小程序、京东小程序 |
backgroundTextStyle |
String |
dark |
下拉 loading 的样式，仅支持 dark/light |
|
enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新，详见页面生命周期。 |
|
onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期 |
|
backgroundColorTop |
HexColor |
#ffffff |
顶部窗口的背景色（bounce回弹区域） |
仅 iOS 平台 |
backgroundColorBottom |
HexColor |
#ffffff |
底部窗口的背景色（bounce回弹区域） |
仅 iOS 平台 |
disableSwipeBack |
Boolean |
false |
是否禁用滑动返回 |
App-iOS（3.4.0+） |
titleImage |
String |
导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址 |
支付宝小程序、H5、App |
|
transparentTitle |
String |
none |
导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 |
支付宝小程序、H5、APP |
titlePenetrate |
String |
NO |
导航栏点击穿透 |
支付宝小程序、H5 |
app-plus |
Object |
设置编译到 App 平台的特定样式，配置项参考下方 app-plus |
App |
|
h5 |
Object |
设置编译到 H5 平台的特定样式，配置项参考下方 H5 |
H5 |
|
mp-alipay |
Object |
设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY |
支付宝小程序 |
|
mp-weixin |
Object |
设置编译到 mp-weixin 平台的特定样式 |
微信小程序 |
|
mp-baidu |
Object |
设置编译到 mp-baidu 平台的特定样式 |
百度小程序 |
|
mp-toutiao |
Object |
设置编译到 mp-toutiao 平台的特定样式 |
字节跳动小程序 |
|
mp-lark |
Object |
设置编译到 mp-lark 平台的特定样式 |
飞书小程序 |
|
mp-qq |
Object |
设置编译到 mp-qq 平台的特定样式 |
QQ小程序 |
|
mp-kuaishou |
Object |
设置编译到 mp-kuaishou 平台的特定样式 |
快手小程序 |
|
mp-jd |
Object |
设置编译到 mp-jd 平台的特定样式 |
京东小程序 |
|
usingComponents |
Object |
引用小程序组件，参考 小程序组件 |
App、微信小程序、支付宝小程序、百度小程序、京东小程序 |
|
leftWindow |
Boolean |
true |
当存在 leftWindow时，当前页面是否显示 leftWindow |
H5 |
topWindow |
Boolean |
true |
当存在 topWindow 时，当前页面是否显示 topWindow |
H5 |
rightWindow |
Boolean |
true |
当存在 rightWindow时，当前页面是否显示 rightWindow |
H5 |
maxWidth |
Number |
单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选) |
H5（2.9.9+） |
问题找到，改成white就完美解决。如果有朋友觉得有用的话欢迎给了念点个赞，如果有任何疑问或者其他问题，请留言评论一起探讨技术，如果你想软件开发技术难题需要解决，或者需要软件项目外包需要
- 点赞
- 收藏
- 关注作者
评论（0）