在Uniapp开发小程序的过程中，常常会遇到官网提供的appbar计划无奈满足开发需要的问题，在应用自定义appbar开发过程中，难以避免的会遇到适配刘海屏的问题，接下来我将会带给大家最完满的刘海屏适配计划，间接上代码。

在app.vue中退出获取机型头部高度的办法，并把获取的数据存入vuex

<script>    export default {        data() {            return {                  globalData: {                    //全局数据管理                    navBarHeight: 0, // 导航栏高度                    menuBottom: 0, // 胶囊距底部间距（顶部间距也是这个）                    menuHeight: 0, // 胶囊高度                  },            }        },        methods: {          calcNavBarInfo () {            // 获取零碎信息            const systemInfo = wx.getSystemInfoSync();            // 胶囊按钮地位信息            const menuButtonInfo = wx.getMenuButtonBoundingClientRect();            // 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标地位-状态栏高度） * 2 + 胶囊高度 + 状态栏高度            this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;            // 状态栏和菜单按钮(标题栏)之间的间距            // 等同于菜单按钮(标题栏)到注释之间的间距（胶囊上坐标地位-状态栏高度）            this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;            // 菜单按钮栏(标题栏)的高度            this.globalData.menuHeight = menuButtonInfo.height;            this.$store.commit('update_globalStyle', this.globalData);          }        },        onLaunch: function() {            console.log('App Launch');            this.calcNavBarInfo();        },        onShow: function() {            console.log('App Show')        },        onHide: function() {            console.log('App Hide')        }    }</script><style>    /*每个页面公共css */    view {        box-sizing: border-box;    }    ::-webkit-scrollbar {        display: none;    }    .flex-right {        display: flex;        justify-content: flex-end;        align-items: center;    }    .flex-center {        display: flex;        justify-content: center;        align-items: center;    }</style>

创立自定义的appbar组件：

<template><view class="nav" :style="`height: ${navBarHeight}px`">  <!-- 胶囊区域 -->  <view class="capsule-box" :style="`height:${menuHeight}px; min-height:${menuHeight}px; line-height:${menuHeight}px; bottom:${menuBottom}px;`">    <!-- 增加本人需要的性能 -->    <view class="nav-handle">      <view class="back">                </view>      <view class="home">      </view>    </view>    <text class="nav-title">{{title}}</text>  </view></view></template><script>    export default {        name:"appbar",        props: {            title: {                type: String,                default: '导航题目'            },        },        data() {            return {                            };        },        computed: {            navBarHeight() {                return this.$store.state.globalStyle.navBarHeight            },            menuHeight() {                return this.$store.state.globalStyle.menuHeight            },            menuBottom() {                return this.$store.state.globalStyle.menuBottom            },        },        mounted() {            console.log(this.navBarHeight, 'bar')        }    }</script><style scoped lang="scss">        .nav {            width: 100vw;            position: relative;        }        // 胶囊栏        .capsule-box {            width: 100vw;            position: absolute;            display: flex;            justify-content: center;            align-items: center;        }        // 题目文字        .nav-title {            height: 100%;            font-size: 32rpx;            margin: 0 auto;             overflow: hidden;            text-overflow: ellipsis;            white-space: nowrap;        }</style>

接下来就是在所需页面里引入appbar组件。能够看到完满适配了刘海屏和非刘海屏，无论机型。心愿本文对你有用！