uni-app導航欄和狀態欄配置

1. 原生導航欄-通用配置

(1) 原生導航優點

• 原生導航的體驗更好，渲染新頁面時，原生導航欄的渲染無需等待新頁面dom加載，可以在新頁面進入動畫開始時就渲染。
• 原生導航還可以避免滾動條通頂，並方便的控制原生下拉刷新。通過pages.json的配置，可以簡單的、跨端的、高性能的開發業務。

(2) 原生導航缺點

• 原生導航欄的擴展能力有限的。尤其是微信下，沒有提供太多導航欄的配置。

(3) 原生導航欄的通用配置： uni-app 自帶原生導航欄，在pages.json里配置。

• 全局導航欄樣式設置： 在pages.json的globalStyle里進行各個參數配置

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Hello uniapp",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6",
    "mp-alipay": {
        "titleBarColor": "#FFFFFF"
    }
},

單頁面導航欄樣式設置：每個page下面的 style配置中的navigationBar各個參數配置，即為通用配置，小程序、app、h5均生效。參考 style設置每個頁面的狀態欄、導航條、標題、窗口背景色等

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "主頁",  
    }
},

備注：單頁面style中配置項會覆蓋 globalStyle 中相同的配置項。

2. 全局取消原生導航欄

備注：一般App里不會使用這個參數配置。建議個別頁面單獨設置不使用原生導航。
(1) 在pages.json的globalStyle里有個navigationStyle設置，默認是default，即帶有原生導航欄。
(2) navigationStyle設置為custom后，所有頁面都沒有原生導航。
說明：但在微信小程序里，右上角始終都有一個膠囊按鈕。很多微信小游戲界面上也沒原生導航欄，但有膠囊按鈕。

"globalStyle": {
    "navigationStyle": "custom",
},

3. 單頁面去除原生導航欄

說明：自微信客戶端 7.0.0 起、App端HBuilderX 2.0.3起，支持通過如下方法取消單獨一個頁面的原生導航欄。但小程序右上角膠囊按鈕仍然去不掉。頁面配置 navigationStyle 為 custom：

{  
    "path" : "pages/index/index",  
    "style" : {  
        "navigationStyle":"custom"  
    }  
}  

4. 原生導航欄在App側的擴展

• 微信小程序的設計里，沒有給原生導航提供太多自定義能力。在開發App時是不夠用的。
• 在App下，每個page下面的style下面還有一個子擴展節點：app-plus（這個節點定義了在5+App環境下，也即iOS、Android環境下，增強的配置）。app-plus下可以設置titleNView等更多參數，可以得到比微信小程序更豐富的擴展性。另外，開發者也可以在必要時取消原生導航欄，使用view自行繪制導航欄。

4.1 App單獨去除原生導航欄(pages.json)

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "主頁",  
         // "navigationStyle":"custom",
        "app-plus":{
            "titleView":false  //不啟用系統導航
        }
     }
}

備注：在App去除原生導航欄后，小程序端側仍保有原生導航欄。
問題：HBuilderX創建的應用默認使用沉浸式狀態欄樣式，去除導航欄后，頁面頂部會直通到狀態欄的區域。

• 最簡單的解決方式就是配置mainfest.json來關閉沉浸式。即通過打開應用的manifest.json文件，切換到代碼視圖，在app-plus -> statusbar 下添加immersed節點並設置值為false。

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    },
}

• 其次可通過頂部狀態欄占位的方式來解決頁面頂部直通狀態欄區域的問題。參考4.2的設置css變量后解決頁面頂部會直通到狀態欄的區域的問題。

4.2 App去除導航欄后改變狀態欄樣式

App因為默認為沉浸式，去除導航欄后，頁面頂部會直通到狀態欄的區域，可能出現如下需求：

• 改變狀態欄文字顏色：設置該頁面的 navigationBarTextStyle 屬性，可取值為 black/white。如果想單獨設置顏色，App端可使用plus.navigator.setStatusBarStyle設置。部分低端Android手機（4.4）自身不支持設置狀態欄前景色。
• 改變狀態欄背景顏色：通過繪制一個占位的view固定放在狀態欄位置，設置此view的背景顏色，即可達到想要的效果，uni-app提供了一個狀態欄高度的css變量，具體參考：uni-app內置的CSS變量。

<template>
    <view>
        <!-- #ifdef APP-PLUS -->  
        <view class="status_bar">  
            <view class="top_view"></view>  
        </view>  
        <!-- #endif --> 
        <view>  
            
        </view> 
    </view>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
    }
}
</script>

<style>
.status_bar {  
    height: var(--status-bar-height);  
    width: 100%;  
    background-color: #F8F8F8;  
}  
.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    background-color: #F8F8F8;  
    top: 0;  
    z-index: 999;  
} 
</style>

• var(--status-bar-height) 此變量在微信小程序環境為固定 25px，在 5+App 里為手機實際狀態欄高度。
• 當設置 "navigationStyle":"custom" 取消原生導航欄后，由於窗體為沉浸式，占據了狀態欄位置。此時可以使用一個高度為 var(--status-bar-height) 的 view 放在頁面頂部，避免頁面內容出現在狀態欄。（實戰過程中此方案仍不能解決頁面內容出現在狀態欄的問題）

設置css變量后解決頁面頂部會直通到狀態欄的區域的問題：設置了css變量后，手機頂部狀態欄區域還是會被頁面內容覆蓋，可使用plus.navigator.getStatusbarHeight()來動態計算系統狀態欄的高度barHeight，然后設置頁面主view的樣式:style="{'margin-top':barHeight+'px'}"，來解決。

<template>
    <view class="uni-flex uni-column" style="height: 100%;">
        <!-- #ifdef APP-PLUS -->  
        <view class="status_bar">  
            <view class="top_view"></view> 
        </view>  
        <!-- #endif --> 
        
        <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;" :style="{'margin-top':barHeight+'px'}">
            <view class="flex-sub jk-header uni-flex uni-column justify-start" @tap="test1">
                <text class="text-white cuIcon-scan"></text>
                <text>掃碼</text>
            </view>
            <view class="flex-treble jk-header uni-flex uni-column justify-center" @tap="test2">
                <text class="text-white cuIcon-rank"></text>
                <text>統計</text>
            </view>
            <view class="flex-sub jk-header uni-flex uni-column justify-end" @click="test3">
                <text class="text-white cuIcon-exit"></text>
                <text>退出</text>
            </view>
        </view>
        
        <view class="uni-flex align-center uni-row margin-xs" style="height: 78%;">
    
        </view>

        <view class="uni-flex uni-row uni-center" style="height: 10%;color: #000000;background-color: F8F8F8;border-top: 3px solid #eee;">

        </view>
                
    </view>
</template>

<script>
var _self;
export default {
    components: {
        uniPopup,
    },
    data() {
        return {
            barHeight:25,
        }
    },
    methods: {
        //獲取系統狀態欄高度
        getSystemStatusBarHeight:function(){
            // #ifdef APP-PLUS
            var height = plus.navigator.getStatusbarHeight();
            _self.barHeight = height;
            // #endif
            // #ifdef H5
            _self.barHeight = 0;
            // #endif
        },
    },
    onLoad:function(){
        _self = this;
        _self.getSystemStatusBarHeight();
        
    }
}
</script>
<style> 

</style>

備注：此種方式經測試，有時頁面打開后頁面主視圖和狀態欄區域會留白(留白的高度其實是狀態欄高度)。

 

 

4.3 其他拓展功能樣式

(1) 可參考Hello-UniApp的自定義導航欄示例

 

 

 

 

 

 

 

作者：瑟聞風傾
鏈接：https://www.jianshu.com/p/7344c4066e82
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。