ionic tab項目對頭部導航欄的全局定義和局部定義

時間 2019-11-17

標籤 ionic tab 項目頭部導航全局定義局部简体版

原文原文鏈接

一，在入口程序 index.html中

<body ng-app="myApp">
    <ion-nav-bar class="bar-dark">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    
    <ion-nav-view></ion-nav-view>
    
</body>

二，在tabs.html中

<ion-tabs class="tabs-light  tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide':globalData.hideTabs}">
    <ion-tab title="首頁" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/home" ng-click="action.selectTabWithIndex(0)">
        <ion-nav-view name="tab-home"></ion-nav-view>
    </ion-tab>
    <ion-tab title="驗證" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/verify" ng-click="action.selectTabWithIndex(1)">
        <ion-nav-view name="tab-verify"></ion-nav-view>
    </ion-tab>
    <ion-tab title="發現" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/find" ng-click="action.selectTabWithIndex(2)">
        <ion-nav-view name="tab-find"></ion-nav-view>
    </ion-tab>
    <ion-tab title="個人" icon-off="ion-ios-gear-outline" icon-on="ion-ios-person-outline" href="#/tab/my" ng-click="action.selectTabWithIndex(3)">
        <ion-nav-view name="tab-my"></ion-nav-view>
    </ion-tab>

</ion-tabs>

三，子模板頁面對頭部導航欄的定義（局部定義）--具體須要使用的標籤

（1）在頭部導航欄無自定義按鈕（view-title）html

<ion-view view-title="關於咱們" hide-tabs="true">
    <!-------------------- 內容 ----------------------->
    <ion-content></ion-content>
</ion-view>

（2）在頭部導航欄 有自定義按鈕ios

1.左右按鈕(ion-nav-buttons)自定義，標題（view-title）僅爲展現功能app

<!-------------------- 個人頁面 ----------------------->
<ion-view view-title="個人" id="page_my">

    <!-------------------- 頂部 ----------------------->
    <ion-nav-buttons side="left">
        <div class="buttons" ng-click="action.toMessageListPage()">
            <button class="button button-icon button-clear">
                <i class="fa fa-commenting-o">
                    <span class="badge badge-assertive" ng-if="true">9</span>
                </i>
            </button>
        </div>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <div class="buttons" ng-click="action.toMyHelpCenterPage()">
            <button class="button font_16_14">
                更多
            </button>
        </div>
    </ion-nav-buttons>
    <!-------------------- 內容 ----------------------->
    <ion-content></ion-content>
</ion-view>

2.標題有一些功能（ion-nav-title）ide

<ion-view id="page_home">
    <!-------------------- 頂部 ----------------------->
    <ion-nav-title>
        <h1 class="title" ng-click="openPopover($event)">
            <button class="button button-clear dropdown_btn" ng-click="openPopover($event)">
                標題<i class="ion-ios-arrow-down"></i>
            </button>
        </h1>
    </ion-nav-title>
    <!-------------------- 內容 ----------------------->
    <ion-content></ion-content>
</ion-view>

（3）帶副標題bar-subheader（ion-header-bar）spa

<ion-view view-title="關於咱們" hide-tabs="true">
    <!-------------------- 副標題 ----------------------->
    <ion-header-bar class="bar bar-subheader scroll_nav ">
         //副標題內容
    </ion-header-bar>
    <!-------------------- 內容 ----------------------->
    <ion-content class="has-subheader"></ion-content>
</ion-view>

四，注

ion-nav-buttons最終會渲染進index.html中的ion-nav-bar 這個「坑」。code

而ion-view則是 1.先渲染進tabs.html中的ion-tab的ion-nav-view這個「坑」（具體對應哪一個ion-tab:由路由控制，路由的views值對應ion-nav-view的name值）; 2.最終再渲染進index.html中的ion-nav-view這個「坑」。htm

因此ion-nav-buttons是在全局下的，控制樣式時，在子標籤中加類寫樣式pdo

‍‍而ion-header-bar 會渲染在ion-view中，因此樣式是局部的‍路由

自定義子模板頁面的頭部導航欄也可用ion-header-bar 和hide-nav-bar結合使用實現，可是會出現頁面相似從新刷新同樣的頁面抖動，效果很差it

<ion-view id="page_my" hide-nav-bar="true">
    <!-------------------- 頂部 ----------------------->
    <ion-header-bar align-title="center" class="bar bar-header bar-dark">
        //左邊按鈕
        <div class="buttons">
            <button class="button button-icon" ng-click="action.toMyHelpCenterPage()">
                <i class="ion-chevron-left"></i>
            </button>
        </div>
        //標題
        <h1 class="title" ng-bind="inParams.title"></h1>
        //右邊按鈕
        <div class="buttons" ng-click="action.toMyHelpCenterPage()">
            <button class="button font_16_14">
                更多
            </button>
        </div>
    </ion-header-bar>    
    <!-------------------- 內容 ----------------------->
    <ion-content></ion-content>
</ion-view>