首页 > 编程语言 >uniapp微信小程序-底部tabBar颜色显示问题

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

时间:2024-01-10 11:55:54浏览次数:40  
标签:uniapp 颜色 微信 json tabBar page

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": [
	...
	]
},

标签:uniapp,颜色,微信,json,tabBar,page
From: https://www.cnblogs.com/MosterSeven/p/17956180

相关文章

  • uniapp中实现H5录音和上传、实时语音识别(兼容App小程序)和波形可视化
    目录Recorder-UniCore插件特性集成到项目中调用录音上传录音ASR语音识别在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能,uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好,用Recorder插件可避免这些问题。DCloud插件市场下载插......
  • uniapp调用相机
    uni.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认二者都有sourceType:['album','camera'],//album从相册选图,camera使用相机success:function(res){console.log(JSON.stringify(res.temp......
  • uniapp里面.map文件是什么,如何在git提交时避免提交
    在UniApp中,.map文件是源代码映射文件,通常与JavaScript文件一起生成。这个文件的主要目的是为了在开发过程中和调试阶段中提供更好的调试支持。它包含了源代码与压缩混淆后的代码之间的映射关系,使得在调试器中能够追踪到源代码的位置。.map文件通常由构建工具(如Webpack、Rollup......
  • php对接微信小程序支付
    基本流程:申请商户平台账号 微信小程序绑定已有商户号并开通微信支付登录商户平台对小程序授权,下载支付证书,记录商户号,支付密钥。阅读微信支付官方文档,完成接口的对接编码。开发支付流程:微信小程序的基本配置。(app_id[小程序唯一id],mch_id[商户号],md5_key[支付密钥],notify_url[......
  • AI壁纸画展头像表情包流量主微信抖音小程序开源版开发
    AI壁纸画展头像表情包流量主微信抖音小程序开源版开发以下是AI壁纸画展头像表情包流量主微信抖音小程序开源版的开发功能列表:用户注册和登录:实现用户注册和登录功能,包括手机号登录、第三方登录等方式。图片上传和展示:用户可以上传自己的图片或选择系统提供的图片进行展示,支持图片......
  • ArkUI实现微信主页布局
    一、Tabs实现页面切换项目整体效果如下:修改Index.ets,实现选项卡切换页面,内容如下:import{NoteBookComponent}from'../components/NoteBookComponent'import{FoundComponent}from'../components/FoundComponent'import{MeComponent}from'../components/MeCompone......
  • pytest-yaml 测试平台-4.生成allure报告,报告反馈企业微信、钉钉、飞书通知
    前言定时任务执行完成后生成可视化allure报告,并把结果发到企业微信,钉钉,飞书通知群里。生成allure报告添加定时任务执行完成后生成allure报告查看报告详情报告会显示详细的request和response详细信息也可以查看log日志报告反馈-企业微信创建定时任务时添加企业微信token企业微信t......
  • 苹果IOS如何支持微信小程序分享
    各位同学们好!我是咕噜铁蛋!,我们经常需要与读者分享有关移动应用的使用方法和技巧。微信小程序是一种便捷的应用形式,可以在微信内部直接使用,而无需下载和安装。本文铁蛋讲详细介绍iOS苹果支持微信小程序类型分享的使用方法,帮助你更好地了解和利用这一功能,拓展你的内容传播渠道。一.什......
  • 在微信中接入gemini
    ......
  • 电脑版微信缓存记录找回好友
    工具下载地址下载地址:https://wwot.lanzouw.com/b0395rbcd 密码:3zp8工具说明此工具是通过读取历史缓存数据找回删除的好友,需要你们还是好友的时候,有在这台电脑上登录过,才有可能找回。使用教程电脑上登录微信,打开软件点击一键读取,等显示输出读取完成后,点击读取结果查看是否......