离子，如何将标签栏设置为标题？

Question

我试图在标题下添加标签栏以产生如下结果：

但是没有运气。

标签栏显示在标题下方，但页边距丑陋（参见图片），并且不是静态的，与滚动视图杂乱无章。

有人可以告诉我我在做什么错吗？

谢谢你的帮助。

布局的模板代码如下：

<ion-view title="{{ 'RESULTS_BY_DAY' | translate }}">

    <ion-nav-buttons side="left">
        <button class="button button-icon icon  ion-chevron-left" ui-sref="home">
        </button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
        </button>
    </ion-nav-buttons>

  <ion-content class="padding" ng-controller="DailyListCtrl">

<div class="bar bar-header bar-light">
  <!--tabbar-->
    <div class="tabs-striped tabs-background-positive tabs-light tabs-icon-left">
        <div class="tabs">
            <a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
                {{ 'DAYS' | translate }}
            </a>
            <a class="tab-item " ui-sref="weekly-list" href="/#/weekly-list">
                {{ 'WEEKS' | translate }}
            </a>
            <a class="tab-item " ui-sref="monthly-list" href="/#/monthly-list">
                {{ 'MONTHS' | translate }}
            </a>
        </div>
    </div>
</div>


      <!--WRITEOUT OVERAL STATS FOR DAYS -->
      <ion-list class="list" ng-init="setDateRange('today');" >

          <!--IF NO ITEM IS FOUND -->
          <ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null">
              <h2>{{ 'NO_DATA_FOUND' | translate }}</h2>
          </ion-item>

          <ion-item class="item" ng-repeat="listDataItem in listData">
                  <div class="listDateTimeBlock">
                    <div>{{listDataItem.DATE_FROM_DD}}</div>
                    <div>{{listDataItem.DATE_FROM_MM}}</div>
                  </div>
                  <div class="listSuccessRateBlock">
                    <h3>{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}: {{listDataItem.SUCCESS_RATE}} %</h3>
                    <h4>{{ 'SUCCESS_RATE_SINCE_START' | translate }}: {{listDataItem.SUCCESS_RATE_SINCE}} %</h4>
                    <h4>{{ 'MY_DEFICIT' | translate }}: {{listDataItem.DEFICIT}} %</h4>
                  </div>
                  <div class="listInformationBlock">
                    <h3>{{ 'DIALS' | translate }} : {{listDataItem.DIALS_CNT}}</h3>
                    <h3>{{ 'CONVERSATIONS' | translate }} : {{listDataItem.CONVERS_CNT}}</h3>
                    <h3>{{ 'APPOINTMENTS' | translate }} : {{listDataItem.APPT_CNT}}</h3>
                  </div>
          </ion-item>

          <ion-infinite-scroll
                  ng-if="canLoadMore"
                  icon="ion-loading-c"
                  distance="10%"
                  on-infinite="setDateRange('past');">
          </ion-infinite-scroll>

      </ion-list>
  </ion-content>



</ion-view>

Answer 1

请参阅ionic官方网站中的文档： http : //ionicframework.com/docs/components/#striped-style-tabs

确保标签标题div中具有.tabs-top，如下所示：

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    Test
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>

然后使用包裹您的内容部分，并在类中添加.has-tabs-top，例如：

<ion-content class="padding has-tabs-top">
    ...your content...
</ion-content>

希望这可以帮助。