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

在Uniapp开发小程序的过程中，经常会遇到官方提供的appbar方案无法满足开发需求的问题，在使用自定义appbar开发过程中，难以避免的会遇到适配刘海屏的问题，接下来我将会带给大家最完美的刘海屏适配方案，直接上代码。
【Uni-app 小程序开发完美适配刘海屏的Appbar方案】在app.vue中加入获取机型头部高度的方法，并把获取的数据存入vuex

/*每个页面公共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; }

创建自定义的appbar组件：

.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; }

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