【报Bug】uni.setTabBarItem动态设置tabbar iconfont icon出现异常

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10

HBuilderX类型：正式

HBuilderX版本号： 3.4.7

手机系统：全部

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

测试过的手机：

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和图片。

test-tabbar-iconfont.rar

2022-05-11 09:50 负责人:DCloud_uni-ad_HDX 分享

7 个回复

DCloud_uni-ad_HDX

暂时把默认的值也带上，后续会支持仅设置的属性

uni.setTabBarItem({    
    index: 0,    
    iconfont: {   
"text": "\ue654",    
                "selectedText": "\ue654",  
        "color": "#000000",    
        "selectedColor": "#f5222d"    
    }    
})