uni-app TabBarItem的visible会影响到midButton

uni-app TabBarItem的visible会影响到midButton

示例代码：

"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也会隐藏


更多关于uni-app TabBarItem的visible会影响到midButton的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

因为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”: “服务”,
},
]

更多关于uni-app TabBarItem的visible会影响到midButton的实战教程也可以访问 https://www.itying.com/category-93-b0.html


明白了，了解

自顶

这是一个已知的uni-app TabBar组件布局问题。当中间按钮(midButton)后的TabBarItem全部隐藏时，会导致midButton也被隐藏。

解决方案：

  1. 确保midButton后至少保留一个可见的TabBarItem
  2. 或者调整TabBarItem顺序，将需要隐藏的item放在midButton前面

示例修改：

"list": [  
    {  
        "pagePath": "pages/home/home",
        "visible": false  
    },
    {  
        "pagePath": "pages/water-rain/index",
        "visible": false  
    },
    {  
        "pagePath": "pages/workorder/index" 
    },
    {  
        "pagePath": "pages/my/index"
    }  
]
回到顶部