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

【问题标题】：ionic - tabs not fixed at bottom of the screen离子 - 选项卡未固定在屏幕底部
【发布时间】：2016-09-17 11:36:54
【问题描述】：

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

我需要它们始终在屏幕底部可见（类似于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-index 上滚动下方。

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

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

PS：所有这些都是指一个子视图，如果它在某种程度上很重要。

感谢您的建议和帮助

【问题讨论】：

你为什么不使用 ion-tab 指令？使用它，将自动将自身与离子视图对齐。见Ionic Documentation
尝试了 tabs 指令，它的作用相同，但它不起作用。 codepen.io/NickHG/pen/NNZYwK?editors=1010
需要玩ion-tabs { position: fixed; left: 0px, bottom: 0px }的风格。但是话虽如此，选项卡位于视图内部的子视图中有点混乱。
是的，我很确定这就是为什么表现不如预期的原因。我目前基本上有。我也尝试了自定义样式，但它并没有真正固定在屏幕底部，而是在滚动上移动

标签： angularjs ionic-framework ionic-tabs

【解决方案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 指令。

【讨论】：

我的问题是我有一个子视图。我当前的模板是这就是我没有添加任何其他视图或内容的原因。根据您的建议，它应该是而不是不工作。测试重叠
为了解决这个问题，我需要向上移动标签（所以它们不在子视图中）。如果我这样做，那么它工作正常。我正在寻求将它们放在子视图中的解决方案
我正要问你只想要子视图上的选项卡对吗？你能确认一下吗？
是的，如果我能把它们放在子视图中就好了
感谢您的示例，但我并不想隐藏它们。我只需要在某些特定的子视图中显示它们。如果属性存在于子视图容器中，我可能最终会编写一个指令作为属性，然后修复视口底部的选项卡。

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：