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变量。





  

  • 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%;">
          
        <view class="status_bar">  
            <view class="top_view">view> 
        view>  
         
        
        <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

转载于:https://www.cnblogs.com/liujun1128/p/11540049.html

你可能感兴趣的:(uni-app导航栏配置)