離子在哪裏把標題和頂部導航欄放在離子視圖中？

我試圖把標題和頂部導航欄內的離子視圖指令。離子在哪裏把標題和頂部導航欄放在離子視圖中？

如果我在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>

來源

2014-12-02 redrom

我點擊+1因爲剛讀你的代碼中，我學會了如何把在頁面頂部的標籤：只需添加「頂級」選項卡即可。謝謝！ – 2015-03-09 14:52:51

嗨..（這是一個建議）設計在離子使用這個鏈接的事實[**使用此鏈接**]（https://creator.ionic.io/app/login）離子有它自己的主題bulider這將幫助您開始設計temaplate – 2016-02-10 10:18:12

您是否最終找到解決方案？ – Jazjef 2016-04-13 21:08:46

嘗試使用tabs和navigation bars JavaScript的版本。
他們更容易在JS代碼中操作，因爲他們提供服務$ionicTabsDelegate和$ionicNavBarDelegate。

來源

2014-12-02 23:29:03 Clawish

這可能會解決實現相同的目標，但它不是問題的答案，而是面臨完全相同的問題。是嗎？是否可以在'nav-view'標題欄中添加按鈕？是否應該支持'ion-header-bar'？如果它應該不起作用，至少對我而言。 – 2015-01-03 17:46:08

我有同樣的問題， t找到一個解決方案到目前爲止 – user2471214 2015-02-01 18:57:45

我也是...在這裏拉我的頭髮的同一個問題我有一個頂部標題，然後下面有2個窗格，左側欄和右側主窗格內容區域。我有一個主窗格的子標題。在這個子 - 他ader，我想顯示導航欄或製表符，但是無論我放置在離子內容的外部還是離子內部，都不會出現在離子導航視圖或離子視圖之上。爲什麼nav-bar不能簡單地到達其包含div的頂部。 – kkap 2015-02-01 21:32:04

下面是導航欄使用的一些例子：與

簡單的頁面按鈕左，右：

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

來源

2016-02-10 11:25:23 beaver

離子在哪裏把標題和頂部導航欄放在離子視圖中？

回答

相關問題