我们想要的效果是这样子的,如下图:
然而残酷的现实给我们展示了这个效果,如下图:
这简直没办法接受嘛。跟设计稿出入也太大了。那怎么办呢?
起初各种查阅文档和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">
奇葩的解决办法,不过好歹是解决了。泪崩了,弄了快一个小时。