1、在src目录下新建一个components/cuNavbar/cuNavbar.vue文件

参考uniapp文档：https://uniapp.dcloud.net.cn/component/#easycom

image.png

image.png

2、cuNavbar.vue代码

<template>
    <uv-sticky :bgColor="bgColor" offset-top="0" style="top:0rpx">
        <!-- #ifdef MP-WEIXIN -->
        <view class="nav-box" :style="{'height':height+'px','background':bgColor}">
            <!-- 自定义导航栏 -->
            <view class="status_bar" :style="{'height':statusBarHeight+'px'}">
                <!-- uni-ui这里是状态栏 -->
            </view>
            <!-- 胶囊位置信息 -->
            <view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}">
                <view v-if="backIcon" class="nav-main-back" @click="back">
                    <uni-icons type="back" size="24" :color="titleColor"></uni-icons>
                </view>
                <text class="nav-main-title fs-36"
                    :style="{color:titleColor,paddingLeft:backIcon?'30rpx':'0rpx'}">{{title}}</text>
            </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <uv-navbar :left-text="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false">
            <template v-slot:left>
                <view v-if="backIcon" class="uv-nav-slot flex align-center" @click="back">
                    <uv-icon name="arrow-left" size="19"></uv-icon>
                    <text class="fs-bold margin-left-sm">{{title}}</text>
                </view>
            </template>
        </uv-navbar>
        <!-- #endif -->
    </uv-sticky>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from "vue"
    const props = defineProps({
        bgColor: {
            type: String,
            default:"transparent",
        },
        backIcon: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
        },
        titleColor: {
            type: String,
            defalut: "#383B37"
        }
    })
    const height = ref(0) //总高度
    const menuButtonRect = ref({}) //胶囊位置信息
    const statusBarHeight = ref(0) //状态栏的高度
    const navBarHeight = ref(0)//导航栏的高度
    onMounted(() => {
        // #ifdef MP-WEIXIN
        getHeight()
        // #endif
    })
    //获取屏幕导航栏高度
    const getHeight = () => {
        if (wx.canIUse('getMenuButtonBoundingClientRect')) {
            let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
            statusBarHeight.value = sysInfo.statusBarHeight;
            // 胶囊位置信息
            let rect = wx.getMenuButtonBoundingClientRect();
            menuButtonRect.value = JSON.parse(JSON.stringify(rect));
            // 导航栏高度
            let navBarHeightR = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
            navBarHeight.value = navBarHeightR
            // 自定义导航栏的高度
            height.value = sysInfo.statusBarHeight + navBarHeightR;
        } else {
            wx.showToast({
                title: '您的微信版本过低，界面可能会显示不正常',
                icon: 'none',
                duration: 4000
            });
        }
    }
    //返回
    const back = () => {
        uni.navigateBack({
            delta: 1
        })
    }
</script>

<style lang="scss" scoped>
    .status_bar {
        // height: var(--status-bar-height);
        width: 100%;
        // background:#ff0;
    }

    .nav-main {
        position: relative;

        // background:#f00;
        .nav-main-back {
            position: absolute;
            left: 10rpx;
        }

        .nav-main-title {
            position: absolute;
            left: 40rpx;
            font-size: 32rpx;
            font-weight: bold;
        }
    }
    .uv-nav-slot {
        font-weight: bold;
        font-size: 32rpx;
    }
</style>

3、页面使用

<!-- 自定义导航栏 -->
            <cuNavbar title="能源审计报告" :backIcon="true" />

4、效果

网页H5效果

image.png

小程序开发中工具运行效果

image.png