uniapp微信小程序-底部tabBar颜色显示问题

发布时间 2024-01-10 11:50:30作者: MosterSeven

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

uniapp官方文档:tabBar属性
发现官方文档内规定了这三个颜色的类型必须是 Hex 格式的,而我的 page.json 内配置的颜色是 rgba 类型的。虽然在 H5 不影响显示,但是在微信小程序内就是无法正常显示。

将 page.json 内 tabBar 颜色格式修改后,微信小程序内显示正常。

"tabBar": {
	"borderStyle": "white",
	"backgroundColor": "#ffffff",
	"color": "#999999",
	"selectedColor": "#D92540",
	"list": [
	...
	]
},