首页 文章

离子在哪里把头和顶部导航栏放在离子视图中?

提问于
浏览
9

我正在尝试将头和顶部导航栏放在ion-view指令中 .

如果页面初始化,如果我将 Headers 导航导航栏放在 ion-view 标签页面之外,则会闪烁黑色 .

但是,如果我尝试在 ion-view Headers 内插入 Headers 和顶部导航栏,则不会显示 Headers 中的 Headers .

有人能告诉我我做错了什么吗?

也许里面的一些标签丢失了?

谢谢你的帮助 .

Here is the code of the template:

<div class="bar bar-header bar-positive has-tabs-top">
    <button class="button button-icon icon  ion-chevron-left" ui-sref="home">
    </button>
    <h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
    <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
    </button>
</div>

<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
    <div class="tabs">
      <a class="tab-item orange">
        Home
      </a>
      <a class="tab-item">
        Favorites
      </a>
      <a class="tab-item">
        Settings
      </a>
    </div>
</div>

<ion-view>
<div class="bar bar-header bar-positive has-tabs-top">
    <button class="button button-icon icon  ion-chevron-left" ui-sref="home">
    </button>
    <h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
    <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
    </button>
</div>

<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
    <div class="tabs">
      <a class="tab-item orange">
        Home
      </a>
      <a class="tab-item">
        Favorites
      </a>
      <a class="tab-item">
        Settings
      </a>
    </div>
</div>
  <ion-content  ng-controller="DailyListCtrl">

      <!--WRITEOUT OVERAL STATS FOR DAYS -->
      <ion-list class="list" >
          <ion-item class="item itemListCustom" ng-repeat="listDataItem in listData">

                  <div class="listDateTimeBlock">
                    <div class="day"><h3>{{listDataItem.DATE_FROM_DD}}</h3></div>
                    <div class="month"><h3>{{listDataItem.DATE_FROM_MM}}</h3></div>
                  </div>

                <!--ROW ONE -->                  
                <div id="left">
                    <div class="left-inner">
                        {{ 'APPOINTMENT_SUCCESS_RATE' | translate }}:
                    </div>
                    <div class="right-inner">
                        {{listDataItem.SUCCESS_RATE}} %
                    </div>
                </div>
                <div id="right">
                    <div class="left-inner floatRight">
                        {{ 'DIALS' | translate }}:
                    </div>
                    <div class="right-inner">
                         {{listDataItem.DIALS_CNT}}
                    </div>
                </div>

                <!--ROW TWO-->
                <div id="left">
                    <div class="left-inner ">
                        {{ 'SUCCESS_RATE_SINCE_START' | translate }}:
                    </div>
                    <div class="right-inner">
                        {{listDataItem.SUCCESS_RATE_SINCE}} %
                    </div>
                </div>
                <div id="right">
                    <div class="left-inner floatRight">
                        {{ 'CONVERSATIONS' | translate }} :
                    </div>
                    <div class="right-inner">
                         {{listDataItem.CONVERS_CNT}}
                    </div>
                </div>                  

                <!--ROW THREE-->
                <div id="left">
                    <div class="left-inner">
                        {{ 'MY_DEFICIT' | translate }}:
                    </div>
                    <div class="right-inner">
                        {{listDataItem.DEFICIT}} %
                    </div>
                </div>
                <div id="right">
                    <div class="left-inner floatRight">
                       {{ 'APPOINTMENTS' | translate }} :
                    </div>
                    <div class="right-inner">
                       {{listDataItem.APPT_CNT}}
                    </div>
                </div>                  
          </ion-item>
      </ion-list>

   <ion-infinite-scroll
      icon="ion-loading-c"
      distance="30%"
      on-infinite="setDateRange();">
    </ion-infinite-scroll>

  </ion-content>

  <!-- BOTTOM TABS -->
     <div class="tabs-striped tabs-background-positive tabs-light">
    <div class="tabs">
      <a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
        <i class="icon ion-ios7-paper-outline"></i>
      </a>
      <a class="tab-item" ui-sref="weekly-list" href="/#/weekly-list">
        <i class="icon ion-star"></i>
      </a>
      <a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
        <i class="icon ion-gear-a"></i>
      </a>
       <a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
        <i class="icon ion-gear-a"></i>
      </a>
    </div>
    </div>
</ion-view>

2 回答

  • 0

    以下是导航栏使用的一些示例:

    • 左右按钮的简单页面:

    http://codepen.io/beaver71/pen/YwLELa

    <ion-view title="onepage">
        <ion-nav-buttons side="left">
          <button class="button">
            LeftButton
          </button>
        </ion-nav-buttons>        
        <ion-nav-buttons side="right">
          <button class="button button-assertive">
            RightButton
          </button>
        </ion-nav-buttons>        
    
        <ion-content class="padding">
          <!-- The content of the page -->
        </ion-content>
      </ion-view>
    
    • 通过侧边菜单导航:

    http://codepen.io/beaver71/pen/XXBvYp

    • 通过侧边菜单和标签栏导航:

    http://codepen.io/beaver71/pen/xZWXBO

  • 5

    尝试使用tabsnavigation bars的JavaScript版本 .
    它们更容易在JS代码中被操作,因为它们带有服务 $ionicTabsDelegate$ionicNavBarDelegate .

相关问题