"tabBar": {
"color": "#718096",
"backgroundColor": "#FFFFFF",
"selectedColor": "#3B82F6",
"borderStyle": "#E5E7EB",
"position": "bottom",
"iconfontSrc": "static/icons/icomoon/icomoon.ttf",
"list": [{
"pagePath": "pages/device/device",
"text": "设备",
"iconfont": {
"text": "\ue901",
"selectedColor": "#9CA3AF",
"color": "#9CA3AF",
"fontSize": "24px"
}
}, {
"pagePath": "pages/data/data",
"text": "数据",
"iconfont": {
"text": "\ue902",
"selectedColor": "#3B82F6",
"color": "#9CA3AF",
"fontSize": "24px"
}
}, {
"pagePath": "pages/user/user",
"text": "我的",
"iconfont": {
"text": "\ue900",
"selectedColor": "#3B82F6",
"color": "#9CA3AF",
"fontSize": "24px"
}
}
]
},
urnotun
- 发布：2025-03-10 16:18
- 更新：2025-03-10 17:50
- 阅读：23
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10 19045.3803
HBuilderX类型： 正式
HBuilderX版本号： 4.55
手机系统： iOS
手机系统版本号： iOS 18
手机厂商： 苹果
手机机型： iPhone15 pro
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
- 创建一个uniapp项目，vue3
- 把附件的static.zip解压缩后，替换为项目的static目录，内含iconfont相关文件
- 项目内添加几个page，并填到tabbar的pagePath
- 给tabbar的所有tab选项设置"iconfont"，具体配置参考上面代码
- ios真机运行，查看界面选中的tab是否能显示出图标
- 创建一个uniapp项目，vue3
- 把附件的static.zip解压缩后，替换为项目的static目录，内含iconfont相关文件
- 项目内添加几个page，并填到tabbar的pagePath
- 给tabbar的所有tab选项设置"iconfont"，具体配置参考上面代码
- ios真机运行，查看界面选中的tab是否能显示出图标
预期结果：
所有tab可看到图标和文字，未选中时tab的图标和文字为灰色，选中的tab图标和文字为蓝色
所有tab可看到图标和文字，未选中时tab的图标和文字为灰色，选中的tab图标和文字为蓝色
实际结果：
未选中的tab可看到图标和文字，颜色如预期。已选中的tab只能看到文字，颜色正常，无法看到图标
未选中的tab可看到图标和文字，颜色如预期。已选中的tab只能看到文字，颜色正常，无法看到图标
bug描述：
使用：
- 图标使用icomoon制作成了iconfont，放在了static\icons\icomoon内
- 在项目内设置开启了tabbar，并为各tab设置iconfont的颜色、大小、选中颜色等配置项
- ios真机运行，当前tab的图标无法显示，其他几个tab的图标可正常显示。切换tab时，图标不显示问题会跟随tab。
- 换用安卓真机(小米)运行，一切正常。
- 使用web浏览器查看，一切正常。
图片提供两个ios手机运行截图；
附件提供iconfont资源目录
代码提供pages.json文件内关于tabbar的设置项，可以看到selectedColor并不是白色或透明色
