tabbar的iconfont图标在uni-app中ios真机运行时选中后图标不可见未选中时正常安卓真机及web均正常

tabbar的iconfont图标在uni-app中ios真机运行时选中后图标不可见未选中时正常安卓真机及web均正常

示例代码：

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

操作步骤：

  1. 创建一个uniapp项目，vue3
  2. 把附件的static.zip解压缩后，替换为项目的static目录，内含iconfont相关文件
  3. 项目内添加几个page，并填到tabbar的pagePath
  4. 给tabbar的所有tab选项设置"iconfont"，具体配置参考上面代码
  5. ios真机运行，查看界面选中的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并不是白色或透明色

Image 1 Image 2

static.zip


更多关于tabbar的iconfont图标在uni-app中ios真机运行时选中后图标不可见未选中时正常安卓真机及web均正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

补充： 使用iconfont直接下载的资源也有相同现象；
在uniappx的项目里验证发现，uniappx里面可以看到选中tab的图标，但是颜色不会跟随设置值变化。

更多关于tabbar的iconfont图标在uni-app中ios真机运行时选中后图标不可见未选中时正常安卓真机及web均正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你这是没有配置 selectedText 吧，光有 text

好的，那就没问题了。。。

谢谢

这是一个iOS平台特有的iconfont渲染问题。可能的原因和解决方案如下：

  1. iOS对iconfont的渲染机制与Android不同，特别是在tabbar选中状态下可能出现渲染异常。

  2. 尝试以下解决方案：

  • 确保字体文件路径正确，iOS对路径大小写敏感
  • 在App.vue中全局引入字体文件：
[@font-face](/user/font-face) {
  font-family: 'icomoon';
  src: url('/static/icons/icomoon/icomoon.ttf') format('truetype');
}
回到顶部