uniapp微信小程序解决上方刘海屏遮挡

本文主要是介绍uniapp微信小程序解决上方刘海屏遮挡，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

在有刘海屏的手机上，我们的文字和按钮等可能会被遮挡   应该避免这种情况

解决

const SYSTEM_INFO = uni.getSystemInfoSync();export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;export const getTitleBarHeight = ()=>{if(uni.getMenuButtonBoundingClientRect){let {top,height} = uni.getMenuButtonBoundingClientRect();return height + (top - getStatusBarHeight())*2		}else{return 40;}
}export const  getNavBarHeight = ()=> getStatusBarHeight()+getTitleBarHeight();

import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight} from "@/utils/system.js"

uni.getSystemInfoSync() 获取机型状态

uni.getMenuButtonBoundingClientRect() 获取胶囊按钮状态

---

getStatusBarHeight: 获取安全高度 状态栏高度

getTitleBarHeight：标题栏高度 胶囊按钮高度

getNavBarHeight：两者相加的（填充层）

这篇关于uniapp微信小程序解决上方刘海屏遮挡的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---