uni-app uni.setTabBarItem() 设置 visible:false 没效果
uni-app uni.setTabBarItem() 设置 visible:false 没效果
操作步骤
uni.setTabBarItem(OBJECT)
设置visible为false 没效果
预期结果
设置visible为false,就会不显示这个
实际结果
还会显示
bug描述
uni.setTabBarItem({ index: 2, text: ‘text’, iconPath: ‘/path/to/iconPath’, selectedIconPath: ‘/path/to/selectedIconPath’, visible:false })
这个visble,false的时候没效果
开发环境 | 版本号 / 类型 |
---|---|
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | win10 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.45 |
第三方开发者工具版本号 | 1.06 |
基础库版本号 | 3.7.3 |
项目创建方式 | HBuilderX |
文档标注了,不支持微信小程序平台。你也可以看微信文档查阅
在 uni-app
中,使用 uni.setTabBarItem()
方法来动态设置底部导航栏(TabBar)的项时,确实可能会遇到 visible: false
设置不生效的情况。这通常是由于一些常见的误解或者不正确的使用方式。下面我将提供一个示例代码,并解释如何正确地使用 uni.setTabBarItem()
来隐藏 TabBar 项。
首先,确保你的应用已经正确配置了 TabBar,通常在 pages.json
中配置,例如:
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/about/about",
"text": "关于"
}
]
}
接下来,在你的代码中,使用 uni.setTabBarItem()
来尝试隐藏某个 TabBar 项。这里有一个重要的点需要注意:uni.setTabBarItem()
的调用需要在页面加载完成后进行,并且只能设置当前页面所在的 TabBar 项的属性。如果你尝试设置其他不在当前激活状态的 TabBar 项的 visible
属性,可能不会生效。
下面是一个示例代码,展示如何在当前页面尝试隐藏当前 TabBar 项:
// 假设这是 pages/index/index.vue 页面
export default {
onLoad() {
// 尝试隐藏当前 TabBar 项(注意:这通常不会工作,因为不能直接隐藏当前项)
// 正确的做法应该是在其他页面或逻辑中隐藏非当前激活的 TabBar 项
uni.setTabBarItem({
index: 0, // 当前页面的索引
text: '首页(隐藏中)', // 可以修改文本以测试调用是否生效
visible: false // 这通常不会隐藏当前项
});
// 如果需要从另一个页面隐藏这个 TabBar 项,应该在那个页面的 onLoad 或其他合适时机调用
// 例如,在另一个页面的 onLoad 中:
// uni.setTabBarItem({
// index: 0, // 要隐藏的 TabBar 项的索引
// visible: false // 正确设置隐藏
// });
}
}
注意:上面的代码尝试隐藏当前页面的 TabBar 项,但这通常不会生效,因为 uni.setTabBarItem()
的 visible
属性主要用于非当前激活状态的 TabBar 项。正确的做法应该是在其他页面或者通过全局逻辑来控制非当前页面的 TabBar 项的可见性。
如果你的目标是完全控制 TabBar 的显示与隐藏,可能需要考虑使用自定义的导航栏组件来替代原生的 TabBar。这样可以更灵活地控制每个导航项的显示与隐藏。