uni-app自定义小程序导航栏，适配刘海屏幕。

状态栏和导航栏用统一的背景填充，自定义一个如下导航栏的效果

 

 uni-app中有获取高度的api，如下代码；

<template>
    <view class="content">
        <!-- 背景图片 包含状态栏的标题-->
        <image class="logo" src="背景图片路径" mode=""></image>
        <!-- 状态栏的占位 -->
        <view class="boxAndTop" :style="{height:statusBarHeight+'px'}"></view>
        <!-- 标题栏 -->
        <view class="uni-seleton" :style="{height:titleBarHeight+'px'}">
            <view class="back-btn">
                <view class="back-btn-go" @click="navBack">
                    <image src="返回按钮图片" mode=""></image>
                </view>
                <view class="title" :style="{lineHeight:titleBarHeight+'px'}">标题栏</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBarHeight: 0,
                titleBarHeight: 0
            }
        },
        onLoad() {

        //获取状态栏的高度
            let systemInfo = uni.getSystemInfoSync()
            this.statusBarHeight = systemInfo.statusBarHeight
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
            this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
        },
        methods: {

            // 返回上一页
            navBack() {
                uni.navigateBack();
            }

        }

    }
</script>

<style lang='scss'>
    .logo {
        width: 100%;
        height: 429rpx;
        position: fixed;
        top: 0;
        right: 0;
        display: block;
    }
    .back-btn {
        z-index: 999;
        font-size: 40upx;
        display: flex;
        justify-content: center;
        width: 100%;
        position: relative;
        .back-btn-go{
            width: 20rpx;
            height: 35rpx;
            position: absolute;
            left: 30rpx;
            top: 50%;
            transform: translateY(-50%);
            image{
                height: 35rpx;
            }
        }
        .title {
            color:#fff;
            font-weight: bolder;
            font-size: 32upx;
        }
    }
</style>

前提是要在pages.json配置

"navigationStyle": "custom",