uni-app導航欄配置

uni-app寫app的內容會與沉浸欄重合在一起，寫好好多，都是有點問題的，這次終於找到解決的方法了，與大家分享一下

 

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

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

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

• 改變狀態欄文字顏色：設置該頁面的 navigationBarTextStyle 屬性，可取值為 black/white。如果想單獨設置顏色，App端可使用plus.navigator.setStatusBarStyle設置。部分低端Android手機
• 自身不支持設置狀態欄前景色。
• 改變狀態欄背景顏色：通過繪制一個占位的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>

https://www.jianshu.com/p/7344c4066e82