uniapp 隐藏
隐藏元素的方法
在 UniApp 中隐藏元素可以通过多种方式实现，具体方法取决于使用场景和需求。
使用 v-if 指令
通过条件渲染控制元素的显示与隐藏。当条件为 false 时，元素会从 DOM 中移除。
<view v-if="isHidden">需要隐藏的内容</view>在脚本中动态控制 isHidden 的值：
data() {
return {
isHidden: false
}
}使用 v-show 指令
通过 CSS 的 display 属性控制元素显示与隐藏。元素始终保留在 DOM 中，仅切换可见性。
<view v-show="isHidden">需要隐藏的内容</view>动态绑定样式
通过绑定 style 或 class 实现隐藏效果，适用于需要灵活控制样式的场景。
<view :style="{ display: isHidden ? 'none' : 'block' }">内容</view>或通过类名控制：
<view :class="{ 'hidden-class': isHidden }">内容</view>在 CSS 中定义隐藏样式：
.hidden-class {
display: none;
}隐藏导航栏或页面组件
隐藏全局导航栏
在 pages.json 中配置页面导航栏的显示状态：
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarHidden": true
}
}动态隐藏导航栏
通过调用 API 在运行时控制导航栏的显示：
uni.hideNavigationBarLoading(); // 隐藏导航栏加载动画
uni.setNavigationBarTitle({
title: '新标题'
});隐藏原生组件
隐藏 TabBar
通过 API 动态控制 TabBar 的显示与隐藏：
uni.hideTabBar(); // 隐藏 TabBar
uni.showTabBar(); // 显示 TabBar隐藏滚动条
在页面样式或全局样式中禁用滚动条：
::-webkit-scrollbar {
display: none;
}注意事项
v-if和v-show的区别：v-if有更高的切换开销，适合不频繁切换的场景；v-show初始渲染开销较大，适合频繁切换。- 动态样式绑定适用于需要复杂样式控制的场景，但可能增加渲染负担。
- 导航栏和 TabBar 的隐藏需遵循平台规范，部分配置可能仅在特定平台生效。
