uniapp微信小程序-底部tabBar颜色显示问题
在 HbuilderX上开发的时候,页面运行在 H5 端的底部 tabBar 显示都没问题,但在运行到微信开发者工具时出现底部 tabBar 实际文字颜色与 H5 效果不同的问题。
检查 page.json 文件。
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#ffffff",
"color": "rgba(153, 153, 153, 1)",// 灰色
"selectedColor": "rgba(217, 37, 64, 1)",// 红色
"list": [
...
]
},
检查发现自己确实配置了颜色,但是微信开发者工具里就是无法正确显示,真机测试也无法正确显示颜色。
于是又仔细去看 uniapp 官方文档 page.json页面路由-tabBar
发现官方文档内规定了这三个颜色的类型必须是 Hex 格式的,而我的 page.json 内配置的颜色是 rgba 类型的。虽然在 H5 不影响显示,但是在微信小程序内就是无法正常显示。
将 page.json 内 tabBar 颜色格式修改后,微信小程序内显示正常。
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#ffffff",
"color": "#999999",
"selectedColor": "#D92540",
"list": [
...
]
},
标签:uniapp,颜色,微信,json,tabBar,page
From: https://www.cnblogs.com/MosterSeven/p/17956180