ionic 的ion-header-bar隐藏
2017-09-11 17:40
483 查看
记一次ionic中用hide-nav-bar=”true”也没办法隐藏navbar的解决过程
我们想要的效果是这样子的,如下图:然而残酷的现实给我们展示了这个效果,如下图:
这简直没办法接受嘛。跟设计稿出入也太大了。那怎么办呢?
起初各种查阅文档和google关键词,得出的结果是使用以下两种方式:
1、<ion-view hide-nav-bar=“true”>
2、$ionicNavBarDelegate.showBar(false)
按理说这两种方式是可以的,但是不知道为什么,实际的结果就是界面会显示我们想要的界面,然后隔几秒后又显示成了我们不想要的那个界面了。
而后为了探究其中的原理,开始给ionic的源码进行断点调试,最终迷失在59302行的代码之中,只知道跟这些代码有关系
self.showBar = function(shouldShow) { if (arguments.length) { self.visibleBar(shouldShow); $scope.$parent.$hasHeader = !!shouldShow; } return !!$scope.$parent.$hasHeader; }; self.visibleBar = function(shouldShow) { if (shouldShow && !isVisible) { $element.removeClass(CSS_HIDE); self.align(); } else if (!shouldShow && isVisible) { $element.addClass(CSS_HIDE); } isVisible = shouldShow; }; self.enable = function(val) { // set primary to show first self.visibleBar(val); // set non primary to hide second for (var x = 0; x < $ionicNavBarDelegate._instances.length; x++) { if ($ionicNavBarDelegate._instances[x] !== self) $ionicNavBarDelegate._instances[x].visibleBar(false); } };
但是是什么具体含义,这次没有研究出来。只能再抽时间研究了。
最终怎么解决的呢?
<ion-viewhide-nav-bar="true" style="z-index: 9999">
奇葩的解决办法,不过好歹是解决了。泪崩了,弄了快一个小时。
相关文章推荐
- ionic 头部指令ion-header-bar标题没有居中对齐
- Ionic ion-header-bar、bar-subheader、ion-tabs
- ionic 隐藏header-ionic中隐藏头部header
- 【ionic App问题总结系列】ionic隐藏底部菜单栏ion-tabs
- ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs
- ionic 隐藏ion-tabs底部导航 hide-tabs
- ionic中隐藏header
- ionic 隐藏ion-tabs 并解决延迟问题 (tabs)
- ionic中index.html页面中有ion-nav-bar时如何加二级标题栏
- ionic ion-tabs底部栏隐藏
- ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs
- ionic 隐藏ion-tabs底部导航 hide-tabs
- 关于ionic ion-nav-back-button 标题隐藏及修改
- ionic 隐藏ion-tab
- 黄聪:ionic使用ion-nav-bar设置了bar-positive类但在安卓Android设备中无法置底
- ionic开发中页面跳转隐藏ion-tabs
- ionic-angular路由,去掉特定页面的ion-nav-bar
- 【转】ionic的bar-header移除底部边框
- ionic2.0的时间标签ion-datetime的时间显示样式和控件显示样式
- ionic的组件 ion-tabs的一个实例