uni-app中uni.setTabBarItem设置visible属性无效

uni-app中uni.setTabBarItem设置visible属性无效

https://uniapp.dcloud.io/api/ui/tabbar?id=settabbaritem

// 需求：控制tabBar某项在特定环境隐藏，注：tabBar list 已经在pages.json中全部定义  

onLoad() {  
    uni.setTabBarItem({  
        index: 0,  
        visible: false,  
        success: function(res) {  
            console.log('成功', res);  
        },  
        fail: function(err) {  
            console.log('失败', err);  
        }  
    });  
}  

// 控制台打印： 成功 {errMsg: "setTabBarItem:ok"}  
页面中tabBar 没有任何反应
信息类型 信息
开发环境 未提及
版本号 未提及
项目创建方式 未提及

更多关于uni-app中uni.setTabBarItem设置visible属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

28 回复

看看平台差异

更多关于uni-app中uni.setTabBarItem设置visible属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


虽然我是写APP在内置浏览器中运行为H5，那也全部支持的呀！只有字节跳动小程序不支持

回复 hufeng: 版本3.2.10+

回复 苏陌: 怎样升级到 版本3.2.10+

刚看到现在的稳定版最高还是3.2.9。。。。 那么3.2.10是将来的版本吗

HX3.2.10-alpha版本

亲 解决了吗 我也遇到了这个问题 设置visible无效

我解决了 需要在是tabbar的页面上使用 也就是需要显示tabbar以后设置visible:false才有用

回复 林昱凌: 我直接自定义tabbar组件了

回复 林昱凌: 有点看不懂你说的，可以详细一点吗，谢谢

回复 林昱凌: 只有app以及h5才可以使用此功能吗

回复 1***@qq.com: 比如你的tabbar定义了page1、page2 需要在page1页面的的生命周期设置tabbar的visible才有效 ；正常逻辑我们是在加载页面就设置tabbar的visible，但是不生效

回复 林昱凌: 老哥，你能详细说下么，我这什么方法都试了，包括在tabbar页面设置uni.setTabBarItem，一写visible完全不行，写text修改还能文字，就是不能隐藏，包括page.json里面加visvisble也试了都不行

同样，离线打包出来，visit就无作用。

这完全不行呀，uni.setTabBarItem({ index: 0, //tabBar的哪一项，从左边算起 0为第一项 visible: false, success: function(res) { console.log(‘成功’, res); }, fail: function(er) { console.log(‘失败’, err); } }) 我在小程序tabar页面设置了，报设置成功了结果屁用没有

请问解决了吗

同问，解决了吗，怎么处理的

setTabBarItem方法的参数中visible是不久前新增的，我发现在使用custom-tab-bar时，设置的visible不生效。
截一张官方文档的图：

可以看到： 控制台设置text属性，原生默认的tabbar和custom-tab-bar都可以生效，但设置visible属性时，只有原生的生效，custom-tab-bar未生效。

已反馈相关人员排查，感谢您的反馈！

关于 setTabBarItem 方法的参数 visible 在使用 custom-tab-bar 时不生效的 Bug

预计下版修复，临时解决方案如下：

vue3 替换附件中 vue3 至路径 hx 根目录\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-components\lib\custom-tab-bar 后重新运行
vue2 替换附件中 vue2 至路径 hx 根目录\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-h5\dist 后重新运行

不知道下个版本啥时候发布呢

回复 1***@163.com: 很快发 alpha

3.6.4.20220922 又无效了

回复 s***@126.com: HX 3.6.4 实测有效

HBuilderX alpha 3.5.5 已修复

3.6.4.20220922 又无效 不能设置了

回复 s***@126.com: HX 3.6.4 实测有效

根据官方文档，uni.setTabBarItem 的 visible 属性仅支持微信小程序平台，在App、H5等平台设置此属性是无效的。

你的代码在微信小程序中应该可以生效，但在其他平台调用时，API会执行成功（返回 setTabBarItem:ok），但实际不会隐藏TabBar项。

解决方案：
如果需要在多端动态控制TabBar显示，建议使用条件编译或动态修改 pages.json 中的TabBar配置（通过uni.setTabBarBadge等方式间接调整）。

例如，在非小程序端，可以通过隐藏整个TabBar或使用自定义TabBar组件替代。

示例（条件编译）：

onLoad() {
    // #ifdef MP-WEIXIN
    uni.setTabBarItem({
        index: 0,
        visible: false
    });
    // #endif
}
回到顶部