在 Ionic 应用程序中隐藏导航栏

Posted 2023-03-13

【中文标题】在 Ionic 应用程序中隐藏导航栏

【英文标题】：Hide nav-bar in Ionic app

【发布时间】：2016-10-17 00:47:08

【问题描述】：

在我的移动应用程序的登录屏幕上，我想通过 ionic 隐藏默认导航栏。我希望屏幕是全尺寸的，没有任何标题栏。我在以下链接上看到了很多答案：

Good pattern for hiding ion-nav-bar on login and not having a back button just after login?

how to hide header bar in ionic?

但它并没有解决实际问题。我可以隐藏导航栏，但顶部的导航栏占用了空白空间，而没有被删除。

有什么线索吗？

【问题讨论】：

致所有其他面临类似问题的开发人员> 首先将 hide-nav-bar 设置为 true，而不是将您的 ion-view 指定为 ng-class 并给出 100% 的高度。从 ion-content 中删除类“has-header”，问题将得到解决。这对我有用，它肯定对你们所有人有用。我没有足够的声誉来支持这个答案，所以我请求其他人如果它适用于他们，请支持这个答案。

【参考方案1】：

你可以在css的帮助下做到这一点，

<style>
  .tab-nav, .bar-footer
    display: none !important;
  

 .bar.bar-header 
   display: none
  

  .has-tabs-top 
    top: 0px !important;
  
  .has-tabs-bottom 
    bottom: 0px !important;
  
  .has-tabs, .bar-footer.has-tabs, .has-footer.has-tabs 
    bottom: 0px;
  
  /* custom header footer overrides */
  .custom-header, .custom-footer
    display: block !important;
  
</style> 

这将隐藏页眉页脚和标签栏，只需将其粘贴到您登录页面的ion-view 之外（下方）。