离子 - 未固定在屏幕底部的选项卡

Question

我在尝试使用离子标签时遇到问题。

我需要它们始终在屏幕底部可见（类似于 position: fixed; bottom: 0; left: 0; ）。

他们遇到的问题是，在我目前的设置中，表现得不像应该的那样。

这是我正在使用的模板：

  <h2>This is subview</h2>
  <div class="list">
    <div class="item " ng-repeat="el in elements">
      {{el.name}}
    </div>
  </div>
      <div class="tabs tabs-icon-only tabs-dark">
        <a class="tab-item">test</a>
        <a class="tab-item">test 1</a>
        <a class="tab-item">test 2</a>
    </div>

但是选项卡链接到屏幕底部，因此，如果我必须滚动页面，则在底部而不是始终可见，内容在不同的 Z 索引上滚动下方。

我可能解释得不好，所以这里有一个例子可以更好地解释这一点：http://codepen.io/NickHG/pen/NNZYwK?editors=1010

总结一下：即使页面较长，我必须做什么才能使选项卡始终固定在底部？

PS：所有这些都是指子视图，如果它以某种方式很重要。

感谢您的任何建议和帮助

Answer 1

你的整个应用程序结构有点混乱。您可以在此处查看一个工作示例：https://codepen.io/anon/pen/XdLEye

您可能应该考虑将 <ion-tabs> 指令与 <ion-tab> 一起使用来构造选项卡。此外，您的选项卡必须是<ion-nav-view>后的下一个脚本，并将您的列表放在<ion-content>内。

根据评论进行编辑：

您可以像这样发出隐藏选项卡的指令：

.directive('hideTabs', function($rootScope) {
  return {
    restrict: 'A',
    link: function($scope, $el) {
      $rootScope.hideTabs = 'tabs-item-hide';
      $scope.$on('$destroy', function() {
        $rootScope.hideTabs = '';
      });
    }
  };
})

然后在您的模板中使用它，如下所示：

<ion-view hide-tabs></ion-view>

并在选项卡中包含以下内容：

<ion-tabs class="tabs-icon-top {{$root.hideTabs}}">

然后，选项卡将隐藏在此特定视图中。如果您只想显示它的几页并将其隐藏在其他位置，也可以将其还原为 show-tabs 指令。

Answer 2

最后，我解决了将选项卡向上移动一个级别的问题，以便它们不再位于子视图中，并将一些范围事件复制到主控制器而不是子视图控制器中。

这是我更改的代码： http://codepen.io/NickHG/pen/NNZYwK?editors=1010

<ion-view>
    <ion-content>
      <h1>Details for id</h1>      
      Below the line, subview content:
      <hr>
      <div ui-view="myDetailsSubview"></div>
    </ion-content>
    <ion-tabs class="tabs-positive tabs-icon-top">      
      <ion-tab>test 1</ion-tab>
      <ion-tab>test 2</ion-tab>     
      <ion-tab>test 3</ion-tab>
    </ion-tabs>
</ion-view>

Answer 3

添加到您的<ion-content> <ion-content scroll="false"> 我不太确定，但您可能必须在离子含量之外添加它，但祝您好运！