小程序自定义头部

<template>
    <!-- 自定义顶部导航条 -->
    <view class="CustomTopNav">
        <view class="CustomContent"
              :style="{ height: navBarHeight + 'px',backgroundColor:backgroundColor}">
            <view class="CustomNav"
                  :style="{
        height: menuHeight + 'px',
        minHeight: menuHeight + 'px',
        left: menuRight + 'px',
        bottom: menuBotton + 'px',
      }">
                <slot></slot>
            </view>
        </view>
        <view :style="{ height: navBarHeight +'px' }"></view>
    </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
    name: "TopNav",
    data() {
        return {
            menuHeight: 0, //胶囊高度
            menuTop: 0, //胶囊距离顶部距离
            navBarHeight: 0, //导航栏高度
            menuRight: 0, //胶囊距右方间距
            menuBotton: 0 //胶囊距底部间距
        };
    },
    props: {
        //背景颜色
        backgroundColor: {
            type: String,
            default: "white"
        }
    },
    computed: {},
    watch: {},
    components: {},
    created() {
        this.getHeight();
    },
    mounted() {},
    methods: {
        getHeight() {
            const that = this;
            // 获取系统信息
            const systemInfo = Taro.getSystemInfoSync();
            // 胶囊按钮位置信息
            const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
            // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
            that.navBarHeight =
                (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
                menuButtonInfo.height +
                systemInfo.statusBarHeight;
            that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
            that.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
            that.menuHeight = menuButtonInfo.height;
        }
    }
};
</script>
<style lang="scss">
.CustomTopNav {
    .CustomContent {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        color: #fff;
        z-index: 800;
        .CustomNav {
            padding-right: 170px;
            position: absolute;
            height: 100%;
            color: black;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
    }
}
</style>