uniapp 自定义导航栏

1、首先可以在全局配置 所有的页面 navigationStyle： custom ，此时所有的页面都不会显示navBar ；也可以 给指定的页面使用自定义导航栏；

2、给自定义导航栏添加自适应高度

<template>
    <view class="navBar" :style="{height: navBarHeight+ 'px'}">
        <!-- #ifdef H5 -->
        <view class="left-btn" @click="$router.go(-1)">
            &lt;
        </view>
        <!-- #endif -->
        
        <!-- #ifdef MP-WEIXIN -->
        <view class="left-btn" @tap="back()">    
            <image class="icon" src="../static/img/left_arrow.png" mode=""></image>
        </view>
        <!-- #endif -->
        
        <view class="title">
            {{title}}
        </view>
        <view class="right-btn">
            <slot name="rightBtn"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name:"navBar",
        props:{
            title:{
                type:String,
                default:"title"
            }
        },
        data() {
            return {
                navBarHeight:40
            };
        },
        mounted(){
            // #ifdef MP-WEIXIN

　　　　　　　　　　
                let btnInfo = wx.getMenuButtonBoundingClientRect()
                this.navBarHeight = (2 * btnInfo.top)+ btnInfo.height;
            // #endif
        },
        methods:{
            back(){
                uni.navigateBack({
                    delta:1
                })
            }
        }
    }
</script>

<style scoped>
.icon {
    width: 20px;
    height: 20px;
}
.navBar {
    display: flex;
    padding: .1rem .2rem;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: #007AFF;
}
</style>

这里的  wx.getMenuButtonBoundingClientRect() 可以获取小程序胶囊位置的详细信息，根据胶囊的位置来设置 navBar 的高度