87 行
2.7 KiB
JavaScript
87 行
2.7 KiB
JavaScript
/**
|
|
* 多端顶部导航与安全区自适应计算模块
|
|
* 彻底解决微信小程序动态胶囊、iPhone灵动岛、刘海屏与系统状态栏遮挡重叠问题
|
|
*/
|
|
|
|
export function getNavBarInfo() {
|
|
let statusBarHeight = 44;
|
|
let navBarHeight = 44;
|
|
let capsuleTop = 48;
|
|
let capsuleHeight = 32;
|
|
let capsuleRightSpace = 0;
|
|
let safeHeaderGap = 20; // 默认 H5 顶部留白 (px)
|
|
let totalHeaderHeight = 88;
|
|
let capsuleBottom = 80;
|
|
|
|
// #ifdef H5
|
|
safeHeaderGap = 16;
|
|
capsuleRightSpace = 0;
|
|
totalHeaderHeight = 44;
|
|
capsuleBottom = 20;
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
let windowInfo = {};
|
|
if (typeof uni !== 'undefined' && typeof uni.getWindowInfo === 'function') {
|
|
windowInfo = uni.getWindowInfo();
|
|
} else if (typeof wx !== 'undefined' && typeof wx.getWindowInfo === 'function') {
|
|
windowInfo = wx.getWindowInfo();
|
|
} else if (typeof uni !== 'undefined' && typeof uni.getSystemInfoSync === 'function') {
|
|
windowInfo = uni.getSystemInfoSync();
|
|
}
|
|
statusBarHeight = windowInfo.statusBarHeight || 44;
|
|
|
|
let menuButton = null;
|
|
if (uni.getMenuButtonBoundingClientRect) {
|
|
menuButton = uni.getMenuButtonBoundingClientRect();
|
|
}
|
|
|
|
if (menuButton && menuButton.top && menuButton.height) {
|
|
capsuleTop = menuButton.top;
|
|
capsuleHeight = menuButton.height;
|
|
capsuleBottom = menuButton.bottom;
|
|
const margin = Math.max(0, menuButton.top - statusBarHeight);
|
|
navBarHeight = menuButton.height + margin * 2;
|
|
const screenWidth = windowInfo.screenWidth || 375;
|
|
// 胶囊避让右边距：屏幕最右侧到胶囊左边缘的距离 + 8px 缓冲
|
|
capsuleRightSpace = (screenWidth - menuButton.left) + 8;
|
|
// 搜索栏等单行导航条精准对齐胶囊 top 坐标
|
|
safeHeaderGap = menuButton.top;
|
|
// 整个导航栏底部总安全距离
|
|
totalHeaderHeight = menuButton.bottom + 10;
|
|
} else {
|
|
safeHeaderGap = statusBarHeight + 6;
|
|
capsuleHeight = 32;
|
|
capsuleBottom = safeHeaderGap + capsuleHeight;
|
|
capsuleRightSpace = 96;
|
|
totalHeaderHeight = statusBarHeight + 44;
|
|
}
|
|
} catch (e) {
|
|
safeHeaderGap = 54;
|
|
capsuleHeight = 32;
|
|
capsuleBottom = 86;
|
|
capsuleRightSpace = 96;
|
|
totalHeaderHeight = 90;
|
|
}
|
|
// #endif
|
|
|
|
return {
|
|
statusBarHeight,
|
|
navBarHeight,
|
|
capsuleTop,
|
|
capsuleHeight,
|
|
capsuleBottom,
|
|
capsuleRightSpace,
|
|
safeHeaderGap,
|
|
totalHeaderHeight,
|
|
capsuleBelowGap: capsuleBottom + 10,
|
|
headerGapPx: `${safeHeaderGap}px`,
|
|
capsuleSpacePx: `${capsuleRightSpace}px`,
|
|
capsuleHeightPx: `${capsuleHeight}px`,
|
|
capsuleBottomPx: `${capsuleBottom}px`,
|
|
capsuleBelowGapPx: `${capsuleBottom + 10}px`,
|
|
totalHeaderHeightPx: `${totalHeaderHeight}px`
|
|
};
|
|
}
|