/** * 多端顶部导航与安全区自适应计算模块 * 彻底解决微信小程序动态胶囊、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` }; }