关于uniapp:Uniapp-小程序开发完美适配刘海屏的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 组件。能够看到完满适配了刘海屏和非刘海屏，无论机型。心愿本文对你有用！