uni-app获取状态栏高度

不念不忘少年蓝@ 2022-10-15 14:00 1128阅读 0赞

# uni-app获取导航栏高度 #

调用函数uni.getSystemInfoSync()会获取到手机的配置信息，当然了也包括导航栏高度uni.getSystemInfoSync().statusBarHeight，这个方法固然是可以的 但是，调用函数总感觉比较费事，而且还需要自己计算，总之就是比较繁琐。写着写着，我裂开了！！！！  
偶然间碰到了一个css计算就能控制方法。  
先上图，拿出证据来讲话。。。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center]

### 上面标题便是自定义顶部导航栏 ###

#### 下面我们来看看关键一行代码 ####

1.先看看vue上面怎么写的

<view class="uni-navbar">
                <view class="title-url">
                    <view class="iconfont back"></view>
                    <view class="right">
                        <text class="txt">已有账号，去登录</text>
                        <text class="iconfont right-url"></text>
                    </view>
                </view>
            </view>

2.下面是css代码

// 注册标标题-这是整个标题样式布局，当然不涉及头部状态栏适配，可以忽略 .title-url{ 
            display: flex;
            height: 45rpx;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin-top: 22rpx; .back{ 
                font-size: 32rpx;
                color:#2E313C;
                transform: rotate(180deg);
                margin-left: 70rpx;
            }
            .right{ 
                display: flex;
                align-items: center;
                margin-right: 70rpx; .txt{ 
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #B37748;
                }
                .right-url{ 
                    font-size: 26rpx;
                    color: #B37748;
                    display: inline-block;
                    padding-top: 8rpx;
                }
            }
        }
        //这是关键代码-适配头部状态栏高度，剩下的只需要自动布局内容高度就可以了，比如上面的-----→注册标标题 .uni-navbar{ width:100%;padding-top:var(--status-bar-height);}

### 下面再说一点，获取同行友友碰到了 ###

同一个页面用var(–status-bar-height)和uni.getSystemInfoSync().statusBarHeight获取的状态栏高度不一致  
列入：

var(--status-bar-height)//获取的是25，
    uni.getSystemInfoSync().statusBarHeight//获取的是20

具体本人未做深究，有待大家总结

↓↓↓ 个人写的一个公众号，还在完善中 ↓↓↓ | ᴥ•́ )✧ ↓↓↓

![在这里插入图片描述][b345727e2eb041c4a86c5859ad9cad6c.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/e7908eb7e777441aba07332fc17086be.png
[b345727e2eb041c4a86c5859ad9cad6c.jpg_pic_center]: /images/20221014/c4c2b50a21a0466db27f0049daae407b.png