54 lines
2.5 KiB
TypeScript
54 lines
2.5 KiB
TypeScript
/**
|
||
* 获取自定义导航栏布局参数，应用启动时调用一次存入 globalData，
|
||
* 各页面直接从 getApp().globalData.navBarLayout 取值即可。
|
||
*
|
||
* 布局示意：
|
||
* ┌──────────────────────────────────┐
|
||
* │ 状态栏 (statusBar) │ ← statusBarHeight
|
||
* ├──────────────────────────────────┤ ← navContentTop
|
||
* │ ┌─┐ ┌─────────┐ ┌──────┐ │
|
||
* │ │←│ │ 标题 │ │ 胶囊 │ │ ← navBarHeight
|
||
* │ └─┘ └─────────┘ └──────┘ │
|
||
* └──────────────────────────────────┘
|
||
* |← capsuleLeft →| |← capRight →|
|
||
* |← windowWidth →|
|
||
*
|
||
* 返回键放置示例（非 tabBar 页面）：
|
||
* 判断显示：getCurrentPages().length > 1
|
||
* WXML:
|
||
* <view class="back-btn"
|
||
* style="top: {{navContentTop}}px; height: {{navBarHeight}}px;
|
||
* line-height: {{navBarHeight}}px;"
|
||
* bind:tap="onBack">← 返回</view>
|
||
*/
|
||
export const getNavBarLayout = () => {
|
||
const sys = wx.getWindowInfo();
|
||
const capsule = wx.getMenuButtonBoundingClientRect();
|
||
const statusBarHeight = sys.statusBarHeight || 0;
|
||
const navBarHeight = capsule.height + (capsule.top - statusBarHeight) * 2;
|
||
return {
|
||
/** 状态栏高度 */
|
||
statusBarHeight,
|
||
/** 导航栏内容区高度（不含状态栏） */
|
||
navBarHeight,
|
||
/** 状态栏 + 导航栏总高度，页面顶部占位直接设这个即可 */
|
||
totalNavHeight: statusBarHeight + navBarHeight,
|
||
/** 导航栏内容区起始 Y 坐标（状态栏底部），放置返回键、标题等元素以此为 top */
|
||
navContentTop: statusBarHeight,
|
||
/** 屏幕宽度 */
|
||
windowWidth: sys.windowWidth,
|
||
/** 胶囊按钮宽度 */
|
||
capsuleWidth: capsule.width,
|
||
/** 胶囊按钮高度 */
|
||
capsuleHeight: capsule.height,
|
||
/** 胶囊按钮距屏幕顶部距离，垂直对齐自定义元素时以此为基准 */
|
||
capsuleTop: capsule.top,
|
||
/** 胶囊按钮距屏幕左侧距离 */
|
||
capsuleLeft: capsule.left,
|
||
/** 胶囊按钮距屏幕右侧距离 */
|
||
capsuleRight: sys.windowWidth - capsule.right,
|
||
/** 导航栏右侧安全内边距，避免内容被胶囊遮挡 */
|
||
navPaddingRight: sys.windowWidth - capsule.left,
|
||
};
|
||
};
|