离子在哪里放置标题和顶部导航栏在离子视图中？

Posted 2023-03-06

【中文标题】离子在哪里放置标题和顶部导航栏在离子视图中？

【英文标题】：Ionic where to put header and top navbar in ion-view?

【发布时间】：2015-01-31 03:08:51

【问题描述】：

我正在尝试将标题和顶部导航栏放在 ion-view 指令中。

如果我将标题导航栏放在ion-view 标记之外，如果页面初始化，页面会闪烁黑色。

但是，如果我尝试在 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-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>

【问题讨论】：

我点击 +1 是因为刚刚阅读了您的代码，我学会了如何将选项卡放在页面顶部：只需添加类“tabs-top”。谢谢！

嗨 ..（这是一个建议）在 ionic 中设计相关的东西使用这个链接Use this link ionic 有它自己的主题 bulider 这将帮助你开始一个设计模板

你最后找到解决办法了吗？

【参考方案1】：

尝试使用 tabs 和 navigation bars 的 javascript 版本。 它们更容易在 JS 代码中进行操作，因为它们带有 $ionicTabsDelegate 和 $ionicNavBarDelegate 服务。

【讨论】：

这可能会解决实现相同的目标，但这不是问题的答案，我面临着完全相同的问题。是否可以向nav-view 标题栏添加按钮？它是否应该支持ion-header-bar？如果它应该那么它不工作，至少对我来说。

我也有同样的问题，目前没有找到解决办法。

我也是......在这里为同样的问题拉扯我的头发。我有一个顶部标题，然后下面有 2 个窗格，左侧栏和右侧主窗格内容区域。然后我有一个主窗格的子标题。在这个子标题下，我想显示一个导航栏或选项卡，但无论我放在哪里都不会出现 - 离子导航视图上方或离子视图中 - 外部或离子含量内。为什么导航栏不能简单地到达其包含 div 的顶部。

【参考方案2】：

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

带有左右按钮的简单页面：

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