如何在离子框架中动态隐藏/显示导航栏？

Posted 2023-03-13

【中文标题】如何在离子框架中动态隐藏/显示导航栏？

【英文标题】：how to dynamically hide/show navBar in ionic framework?

【发布时间】：2015-11-23 16:54:21

【问题描述】：

我正在尝试做的是在屏幕处于横向时隐藏 ion-nav-bar，因为它会占用太多空间。理想的设置是 css，这在 android 设备上运行良好，但在 ios 设备上却不行。

ionic 中似乎存在一个错误，即当 ion-nav-bar 设置为“display:none”时，iOS 设备上仍会显示一些空白区域，但不会在 android 上显示。我在这里描述了这个问题：

http://forum.ionicframework.com/t/trouble-hiding-ion-nav-bar-on-ios-devices-but-not-android/31370

我正在想办法解决这个问题。选项有：

1) 在屏幕方向改变时使用 $ionicNavBarDelegate.showBar(false)。这确实隐藏了导航栏，但是当屏幕恢复为纵向模式时，我无法恢复导航栏。

2) 将 hide-nav-bar="$root.hideNavBar" 放在 ion-view 中，然后在屏幕方向更改时更改 $root.hideNavBar 的值。

这似乎行不通。 nav-bar 显示/隐藏自身并且不根据 $root.hideNavBa 的最新值进行操作。

对不起，我是初学者，所以请原谅我的无知和建议。

提前致谢。

【参考方案1】：

尝试使用 ng-if 对我来说它适用于 heder

【讨论】：

这似乎不适用于我的手。它根据开关“hideNavBar”的初始值而不是最新值进行操作。它还以某种方式隐藏导航栏内的导航按钮。