uni-app uni.setTabBarItem动态设置tabbar iconfont icon出现异常

uni-app uni.setTabBarItem动态设置tabbar iconfont icon出现异常

测试过的手机：

andriod

示例代码：

index.vue页面

<template>  
    <view>  
        <button @click="update">修改tabbar iconfont 颜色</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  
            update() {  
                uni.setTabBarItem({  
                    index: 0,  
                    iconfont: {  
                        "text": "\ue654",  
                        "selectedText": "\ue654",  
                        "fontSize": "20px",    
                        "color": "#000000",  
                        "selectedColor": "#f5222d"  
                    }  
                })  
            }  
        }  
    }  
</script>  

<style>  

</style>

pages.json tabBar配置

"tabBar": {  
        "color": "#8a8a8a",  
        "selectedColor": "#1890ff",  
        "backgroundColor": "#FFFFFF",  
        "iconfontSrc": "static/testiconfont.ttf",  
        "list": [{  
            "pagePath": "pages/index/index",  
            "text": "index",  
            "iconfont": {  
                "text": "\ue654",  
                "selectedText": "\ue654",  
                "fontSize": "20px",  
                "color": "#8a8a8a",  
                "selectedColor": "#1890ff"  
            }  
        }, {  
            "pagePath": "pages/test/test",  
            "text": "test",  
            "iconfont": {  
                "text": "\ue631",  
                "selectedText": "\ue631",  
                "fontSize": "20px",  
                "color": "#8a8a8a",  
                "selectedColor": "#1890ff"  
            }  
        }]  
    }

操作步骤：

在tabbar页面动态设置uni.setTabBarItem iconfont 的颜色，然后切换来回切换tabbar页面。

预期结果：

在tabbar页面动态设置uni.setTabBarItem iconfont 的颜色后，所在当前tabbar页面的iconfont处于选中状态。

实际结果：

在tabbar页面动态设置uni.setTabBarItem iconfont 的颜色后，当前所在tabbar的iconfont处于未选中状态。

bug描述：

android端： uni.setTabBarItem 动态设置tabbar iconfont 选中颜色后，当前所在的tabbar页面iconfont颜色没有处于选中状态。 vue2和vue3均有此问题，详见附件demo和图片。

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 页面类型 vue版本 打包方式 项目创建方式
uniapp/App Windows Windows 10 正式 3.4.7 全部 vue vue3 云端 HBuilderX

更多关于uni-app uni.setTabBarItem动态设置tabbar iconfont icon出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

暂时把默认的值也带上，后续会支持仅设置的属性 uni.setTabBarItem({
index: 0,
iconfont: {
“text”: “\ue654”,
“selectedText”: “\ue654”,
“color”: “#000000”,
“selectedColor”: “#f5222d”
}
})

更多关于uni-app uni.setTabBarItem动态设置tabbar iconfont icon出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚测试把默认的值也带上可以解决ios端不显示图标的问题，但是android端的问题还是和提交的bug问题描述一样的情况（当前tabbar页面iconfont不是选中状态）。

回复 邓琪昌: 需要把page.json中配置的iconfont所有参数都带上，少一个都不行

提供一个简单的测试工程

已提供 test-tabbar-iconfont.rar 测试工程

好玩

已提供测试工程

最新的测试工程，运行点击按钮修改tabbar iconfont即可复现

也遇到这个问题了，还是无解啊

请问bug这个修复了吗？

在 uni-app 中使用 uni.setTabBarItem 动态设置 TabBar 的图标时，如果使用 iconfont 图标，可能会遇到一些异常情况。以下是一些常见问题及解决方案：

1. 图标不显示

  • 原因：可能是 iconfont 的字体文件未正确加载，或者路径配置不正确。
  • 解决方案：
    • 确保 iconfont 的字体文件已正确引入到项目中。
    • 在 uni.setTabBarItem 中，iconPath 和 selectedIconPath 的路径需要是绝对路径或正确的相对路径。
    • 如果使用网络路径，确保路径正确且网络请求成功。
uni.setTabBarItem({
  index: 0,
  iconPath: '/static/tabbar/home.png', // 本地路径
  selectedIconPath: '/static/tabbar/home-active.png', // 本地路径
  text: '首页'
});

2. 图标显示为方块或乱码

  • 原因：可能是 iconfont 的字体文件未正确加载，或者字体文件格式不支持。
  • 解决方案：
    • 确保 iconfont 的字体文件已正确引入到项目中。
    • 检查字体文件的格式，确保支持 .ttf、.woff 等常见格式。
    • 在 uni.setTabBarItem 中，iconPath 和 selectedIconPath 的路径需要是绝对路径或正确的相对路径。
uni.setTabBarItem({
  index: 0,
  iconPath: '/static/tabbar/home.ttf', // 字体文件路径
  selectedIconPath: '/static/tabbar/home-active.ttf', // 字体文件路径
  text: '首页'
});

3. 图标大小不一致

  • 原因：可能是 iconfont 的图标大小与 TabBar 的默认图标大小不一致。
  • 解决方案：
    • 在 iconfont 中调整图标的大小，确保与 TabBar 的默认图标大小一致。
    • 在 uni.setTabBarItem 中，iconPath 和 selectedIconPath 的路径需要是绝对路径或正确的相对路径。
uni.setTabBarItem({
  index: 0,
  iconPath: '/static/tabbar/home.png', // 本地路径
  selectedIconPath: '/static/tabbar/home-active.png', // 本地路径
  text: '首页'
});

4. 图标颜色不正确

  • 原因：可能是 iconfont 的图标颜色与 TabBar 的默认颜色不一致。
  • 解决方案：
    • 在 iconfont 中调整图标的颜色，确保与 TabBar 的默认颜色一致。
    • 在 uni.setTabBarItem 中，iconPath 和 selectedIconPath 的路径需要是绝对路径或正确的相对路径。
uni.setTabBarItem({
  index: 0,
  iconPath: '/static/tabbar/home.png', // 本地路径
  selectedIconPath: '/static/tabbar/home-active.png', // 本地路径
  text: '首页'
});

5. 动态设置图标后，图标未更新

  • 原因：可能是 uni.setTabBarItem 的调用时机不正确，或者 TabBar 的缓存未清除。
  • 解决方案：
    • 确保 uni.setTabBarItem 在正确的时机调用，例如在页面加载完成后调用。
    • 尝试清除 TabBar 的缓存，或者重新加载页面。
onLoad() {
  uni.setTabBarItem({
    index: 0,
    iconPath: '/static/tabbar/home.png', // 本地路径
    selectedIconPath: '/static/tabbar/home-active.png', // 本地路径
    text: '首页'
  });
}

6. 使用 iconfont 图标时，图标显示为文字

  • 原因：可能是 iconfont 的图标未正确转换为图片格式。
  • 解决方案：
    • 将 iconfont 的图标转换为图片格式（如 .png、.jpg），然后在 uni.setTabBarItem 中使用图片路径。
    • 在 uni.setTabBarItem 中，iconPath 和 selectedIconPath 的路径需要是绝对路径或正确的相对路径。
uni.setTabBarItem({
  index: 0,
  iconPath: '/static/tabbar/home.png', // 本地路径
  selectedIconPath: '/static/tabbar/home-active.png', // 本地路径
  text: '首页'
});
回到顶部