uniapp自定义导航栏配置及沉浸式处理

最新推荐文章于 2025-07-09 19:05:07 发布

转载最新推荐文章于 2025-07-09 19:05:07 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/a7ab5123dfe4

文章标签：

#uniapp #自定义导航栏

uniapp 专栏收录该内容

6 篇文章

订阅专栏

备注：一般App里不会使用这个配置,建议个别页面单独设置不使用原生导航。

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

2. 单独去除原生导航栏

2.1App单独去除原生导航栏(方法一)

{  
    "path" : "pages/index/index",  
    "style" : {  
        "navigationBarTitleText": "首页",
        "app-plus":{
            "titleNView":false
        }
    }  
}

2.2单页面去掉原生导航栏(方法二)

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

3.状态栏沉浸式处理

3.1配置mainfest.json来关闭沉浸式（方法一）

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

3.2页面加状态栏站位（方法二）

<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>