x***@foxmail.com
x***@foxmail.com
  • 发布:2025-04-23 16:18
  • 更新:2025-04-23 18:06
  • 阅读:81

【报Bug】TabBarItem的visible会影响到midButton

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11专业版 24H2

HBuilderX类型: 正式

HBuilderX版本号: 4.57

浏览器平台: Edge

浏览器版本: 135.0.3179.85

项目创建方式: HBuilderX

示例代码:

pages.json

    "tabBar": {  
        "color": "#333333",  
        "selectedColor": "#286AFF",  
        "borderStyle": "#ebebeb",  
        "backgroundColor": "white",  
        "height": "50px",  
        "midButton": {  
            "backgroundImage": "/static/tabbar/mid-btn__icon1.gif",  
            "width": "55px",  
            "height": "55px"  
        },  
        "list": [  
            {  
                "pagePath": "pages/home/home",  
                "iconPath": "/static/tabbar/home.png",  
                "selectedIconPath": "/static/tabbar/home-selected.png",  
                "text": "首页",  
                "visible": false  
            },  
            {  
                "pagePath": "pages/water-rain/index",  
                "iconPath": "/static/tabbar/water-rain.png",  
                "selectedIconPath": "/static/tabbar/water-rain-selected.png",  
                "text": "服务",  
                "visible": false  
            },  
            {  
                "pagePath": "pages/workorder/index",  
                "iconPath": "/static/tabbar/workorder.png",  
                "selectedIconPath": "/static/tabbar/workorder-selected.png",  
                "text": "工单",  
                "visible": false  
            },  
            {  
                "pagePath": "pages/my/index",  
                "iconPath": "/static/tabbar/my.png",  
                "selectedIconPath": "/static/tabbar/my-selected.png",  
                "text": "我的"  
            }  
        ]  
    }

操作步骤:

调用以下代码后,midButton才显示

uni.setTabBarItem({  
            index: 2,  
            visible: true  
        })

预期结果:

控制tabarItem显示效果不影响midButton

实际结果:

控制tabarItem显示效果影响midButton

bug描述:

设置了midbutton后,如果隐藏midButton后面的tabbar,midButton也会隐藏

2025-04-23 16:18 负责人:无 分享
已邀请:
x***@foxmail.com

x***@foxmail.com (作者)

自顶

爱豆豆

爱豆豆 - 办法总比困难多

因为midButton是居中的 所以两边的tabbar数量必须相同才可以
即使你不用visible 当tabbar数量不能左右平均分配的时候 midButton 也是不会显示的

//midButton不显示  
    "list": [    
            {    
                "pagePath": "pages/home/home",    
                "iconPath": "/static/tabbar/home.png",    
                "selectedIconPath": "/static/tabbar/home-selected.png",    
                "text": "首页",    
            },    
            {    
                "pagePath": "pages/water-rain/index",    
                "iconPath": "/static/tabbar/water-rain.png",    
                "selectedIconPath": "/static/tabbar/water-rain-selected.png",    
                "text": "服务",    
            },    
            {    
                "pagePath": "pages/workorder/index",    
                "iconPath": "/static/tabbar/workorder.png",    
                "selectedIconPath": "/static/tabbar/workorder-selected.png",    
                "text": "工单",    
            }   
        ]  
//midButton 显示  
    "list": [    
            {    
                "pagePath": "pages/home/home",    
                "iconPath": "/static/tabbar/home.png",    
                "selectedIconPath": "/static/tabbar/home-selected.png",    
                "text": "首页",    
            },    
            {    
                "pagePath": "pages/water-rain/index",    
                "iconPath": "/static/tabbar/water-rain.png",    
                "selectedIconPath": "/static/tabbar/water-rain-selected.png",    
                "text": "服务",    
            },  
        ]

要回复问题请先登录注册