离子框架中的标签答案

【问题标题】：tabs in ionic framework离子框架中的标签
【发布时间】：2015-05-18 08:34:30
【问题描述】：

我目前面临一些与离子标签和浮动标签概念相关的问题。

目前使用离子框架..我正在构建一个移动应用程序，一旦页面滚动到选项卡所在的位置，我希望 tabs 在标题下方获得 fixed是。我在 ion-content 中保留了 ion-tabs。

获得滚动位置后，我添加了一个“固定”类。当它添加固定的类时，背景变为白色（没有内容可见）并且选项卡被隐藏而不是固定在标题下方的位置。

$scope.onScroll = function() {

    var scrollWidth = $(".bar".height() + $(".maincontent".height(); console.log($ionicScrollDelegate.getScrollPosition()); console.log(scrollWidth);
          if (parseInt($ionicScrollDelegate.getScrollPosition().top) > scrollWidth) {

            $('ion-tabs').addClass('fixed');
          } else {
            $('ion-tabs').removeClass('fixed');
          }
        };

.fixed {
  left: 0;
  top: 44px;
  position: fixed;
  z-index: 100;
  width: 100%;
}

<ion-view>
  <ion-header-bar class="bar bar-positive">
  </ion-header-bar>

  <ion-content on-scroll="onScroll()">
    <div class="main-content">

      <!-- some content here -->

    </div>
    <ion-tabs class="tabs-icon-top tabs-color-active-dark tabs-background-positive tabs-striped tabs-top">
      <!-- About Tab -->
      <ion-tab title="About">
        <ion-nav-view>
          <div>
            <!--some tab content -->
          </div>
        </ion-nav-view>
      </ion-tab>

      <!--update Tab -->
      <ion-tab title="Updates">
        <ion-nav-view animation="slide-left-right">
          <ion-view>
            <ion-content scroll="false">

              <!-- some other tab content -->

            </ion-content>
          </ion-view>
        </ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </ion-content>
</ion-view>

【问题讨论】：

如果你把你的问题表述得更清楚会很有帮助。
我的问题与在滚动时修复离子标签有关。我希望标签固定在我的主标题下方的位置..就像 ionic 中的子标题组件但是在滚动之后..我在修复它时遇到了问题。我开始知道将离子标签放置在离子内容中确实会产生一些 css 错误但不知道如何解决问题的事实。我希望我现在有点清楚了。
您尝试修复它了吗？我在我的离子应用程序中也遇到了同样的问题
是的，我们已经使用另一种方法修复了我们的选项卡。我们保留在 ion-content 中的选项卡允许它向上滚动.. 并显示了其他固定选项卡（副本相同的标签，但只是不同的 id) 在那个位置使用 jquery .. 我们获取了整个内容的高度，当我们的内容的高度大于我们必须显示固定标签的高度时，我们保持它固定跨度>
@Asra，你的标签分布均匀吗？？

标签： javascript html css ionic-framework controller

【解决方案1】：

我一直在使用 ionic.css 文件，并找到了固定选项卡的解决方案，但就像我说的那样，您必须编辑 ionic.css 文件。

你必须编辑这个：

.tabs-top.tabs-striped
{
   padding-bottom: 0;
   position: fixed;
   z-index: 9999
}
.tabs-top > .tabs, .tabs.tabs-top 
{
  top: 44px;
  padding-top: 0;
  background-position: bottom;
  border-top-width: 0;
  border-bottom-width: 1px;
  position: fixed;
  z-index: 9999 
}

这样您将修复离子标签，但如果您希望该栏标题也将被修复，请编辑此

.bar-header 
{
  top: 0;
  border-top-width: 0;
  border-bottom-width: 1px;
  position: fixed;
  z-index: 9999 
}

【讨论】：