uni-app小程序自定义navbar

<template>
<view class="navbar">
    <view class="navbar-fixed">
        <!-- statusHeight 状态栏的高度  蓝色区块-->
        <view class="statusHeight" :style="{ height: statusBarHeight + 'px' }"></view>
        <!-- navcontent tabbar导航栏高度 绿色区块-->
        <view class="navcontent" :style="{ height: navBarHeight + 'px' }"><slot>这里可以导航栏内容这是个插槽</slot></view>
    </view>
    <!-- 占位盒子 它的高度=状态栏高度+导航栏高度-->
    <view class="placeholder" :style="{ height: navBarHeight + statusBarHeight + 'px', background: 'red' }"></view>
    <view class="filter">我是筛选组件</view>
    <view class="content">
        <scroll-view scroll-y class="scroll-y-item">
            <view v-for="i in 100" :key="i">我是第{{ i }}个滚动内容</view>
        </scroll-view>
    </view>
</view>
</template>

data(){
    return {
        statusBarHeight:20,//状态栏的高度系统默认20px 
        menuBarHeight:32,//微信胶囊的高度
        navBarHeight:44,//uniapp 默认的高度是44（这里默认高度也就是H5导航栏的高度） 根据公式计算的高度不是固定值44
    }
},
onLoad(){
    //获取系统信息 具体信息请转至 https://uniapp.dcloud.io/api/system/info
    let res = uni.getSystemInfoSync();
    
    console.log('状态栏的高度', res.statusBarHeight);
    this.statusBarHeight = res.statusBarHeight;
    
    // #ifdef MP-WEIXIN
        //获取胶囊位置信息
        let menuBottonInfo = uni.getMenuButtonBoundingClientRect();
        //微信胶囊的高度
        this.menuBarHeight = menuBottonInfo.height;
        // 胶囊底部 - 状态栏 + 胶囊顶部 - 状态栏 = 导航栏的高度（胶囊距离顶部的距离+胶囊距离底部距离+胶囊自身的高度）
        this.navBarHeight = menuBottonInfo.bottom - res.statusBarHeight + (menuBottonInfo.top - res.statusBarHeight);
    // #endif
}
//样式部分
//这里需要注意的是在uniapp 中如果想操作小程序的page 标签 style 不可以加 scoped 
<style>
    page{//这样在小程序中才会生效
        height:100%;
        display:flex
    }
</style>
<style scoped lang="scss">
page{//这样在小程序中是不会生效的
    height:100%;
    display:flex
}
.navbar {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid red;
    overflow: hidden;
    .navbar-fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        background-color: #fff;
        .statusHeight {
            background-color: #007aff;
        }
        .navcontent {
            background-color: #4cd964;
        }
    }
    .filter {
        width: 750rpx;
        height: 100rpx;
        background-color: #ccc;
        line-height: 100rpx;
    }
    .content {
        border: 1px solid red;
        box-sizing: border-box;
        height: 100%;
        flex: 1;
        border: 1px solid green;
        overflow: hidden;
    }
    .scroll-y-item {
        height: 100%;
    }
}
</style>

最终效果展示