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

在Uniapp开发小程序的过程中,经常会遇到官方提供的appbar方案无法满足开发需求的问题,在使用自定义appbar开发过程中,难以避免的会遇到适配刘海屏的问题,接下来我将会带给大家最完美的刘海屏适配方案,直接上代码。

在app.vue中加入获取机型头部高度的方法,并把获取的数据存入vuex




创建自定义的appbar组件:





接下来就是在所需页面里引入appbar组件。可以看到完美适配了刘海屏和非刘海屏,无论机型。希望本文对你有用!
Uni-app 小程序开发完美适配刘海屏的Appbar方案_第1张图片
Uni-app 小程序开发完美适配刘海屏的Appbar方案_第2张图片

你可能感兴趣的:(uniapp小程序vue.js)