我们想要的效果是这样子的，如下图：

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

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

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

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