uni-app导航栏配置

本文介绍了uni-app中解决页面内容与状态栏重合的问题,包括通过修改manifest.json关闭沉浸式,设置`navigationBarTextStyle`改变文字颜色,使用CSS变量调整页面布局,以及在pages.json中全局设置状态栏颜色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值