Uni-app 小程序开发完美适配刘海屏的Appbar方案

在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组件。可以看到完美适配了刘海屏和非刘海屏，无论机型。希望本文对你有用！