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

zhuyuyaya2024-02-24 1:03

问题

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

解决

javascript 复制代码

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();

javascript 复制代码

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

uni.getSystemInfoSync() 获取机型状态

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

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

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

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