记一次ionic中用hide-nav-bar=”true”也没办法隐藏navbar的解决过程

/ 0评 / 0

我们想要的效果是这样子的,如下图:

NewImage

然而残酷的现实给我们展示了这个效果,如下图:

NewImage

这简直没办法接受嘛。跟设计稿出入也太大了。那怎么办呢?

起初各种查阅文档和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">

奇葩的解决办法,不过好歹是解决了。泪崩了,弄了快一个小时。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注