離子框架中的選項卡

Question

我目前面臨一些與離子標簽和浮動標簽概念有關的問題。

當前正在使用ionic框架。.我正在構建一個移動應用程序，在該應用程序中，我希望一旦頁面滾動到選項卡所在的位置，選項卡就可以固定在標題下方。 我把離子標簽放在離子含量里面。

獲得滾動位置后，我添加了一個“固定”類。 當它添加固定的類時，背景變為白色（看不到任何內容），並且選項卡被隱藏而不是固定在標題下方的位置。

$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>

Answer 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 
}