
1 changed files with 50 additions and 0 deletions
@ -0,0 +1,50 @@ |
|||||
|
function navParams() { |
||||
|
|
||||
|
let params = { |
||||
|
// 导航栏整体高度:状态栏+导航啦
|
||||
|
navHeightPx: '0px', |
||||
|
// 状态栏高度
|
||||
|
statusBarHeightPx: '0px', |
||||
|
// 导航栏可用高度(去除状态栏)
|
||||
|
navUseHeightPx: '0px', |
||||
|
// 导航栏垂直内间距
|
||||
|
navVerticalPaddingPx: '0px', |
||||
|
// 导航栏右内间距
|
||||
|
navPaddingRightPx: '0px' |
||||
|
} |
||||
|
|
||||
|
// 获取胶囊高度
|
||||
|
// 以下示例数据都 来自 iPhoneX 75%大小的微信模拟器
|
||||
|
// #ifdef MP-WEIXIN
|
||||
|
let menuButton = uni.getMenuButtonBoundingClientRect(); |
||||
|
// 胶囊高度32 实际应该为 80像素
|
||||
|
let menuButtonHeight = menuButton.height; |
||||
|
// 整体屏幕的高度 - 可用的高度 = 状态栏+导航栏+底部导航栏(部分手机虚拟返回按键)
|
||||
|
// 状态栏+导航栏 88 实际220
|
||||
|
let navHeight = info.screenHeight - info.windowHeight; |
||||
|
// 小程序胶囊底部的纵向坐标 80 实际为200像素
|
||||
|
let menuButtonBottom = menuButton.bottom; |
||||
|
// 胶囊底部距离导航栏底部的间距为8 实际为20像素
|
||||
|
let menuButtonVerticalPadding = navHeight - menuButtonBottom; |
||||
|
// 胶囊右侧距离屏幕右侧的间距为7 实际为17.5(18)像素
|
||||
|
let menuButtonHorizontalPadding = info.screenWidth - menuButton.right; |
||||
|
// 不使用系统提供的状态栏高度44,自己计算高度40 实际为100像素
|
||||
|
let statusBarHeight = navHeight - menuButtonHeight - menuButtonVerticalPadding * 2; |
||||
|
// 导航栏可用最大高度 48 实际 120
|
||||
|
let navMaxUseHeight = navHeight - statusBarHeight |
||||
|
// 导航栏paddingRight 101 实际252.5(253)像素
|
||||
|
let navPaddingRight = menuButton.width + menuButtonHorizontalPadding * 2 |
||||
|
|
||||
|
params.navHeightPx = navHeight + 'px' |
||||
|
params.statusBarHeightPx = statusBarHeight + 'px' |
||||
|
params.navUseHeightPx = navMaxUseHeight + 'px' |
||||
|
params.navVerticalPaddingPx = menuButtonVerticalPadding + 'px' |
||||
|
params.navPaddingRightPx = navPaddingRight + 'px' |
||||
|
// #endif
|
||||
|
|
||||
|
return params |
||||
|
} |
||||
|
|
||||
|
export { |
||||
|
navParams |
||||
|
} |
Loading…
Reference in new issue