117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import { Modular, Manager, ILifetime } from "../../core/Module";
|
|
import { Logger, LogLabel, LevelLogLabel, LifeCycleLogLabel, NormalStyle } from "../../core/Logger";
|
|
|
|
/**
|
|
* 在 UI 中显示的数据
|
|
*/
|
|
type DisplayData = {
|
|
|
|
/**
|
|
* 显示内容
|
|
*/
|
|
val:string;
|
|
|
|
/**
|
|
* 唯一键值 用来做判断
|
|
*/
|
|
key:string;
|
|
};
|
|
|
|
/**
|
|
* 模组事件
|
|
*/
|
|
type StatusBarEvent = {
|
|
m: DisplayData
|
|
};
|
|
|
|
/**
|
|
* 顶部状态栏
|
|
*/
|
|
class StatusBar<M extends Manager> extends Modular<M, {}, StatusBarEvent>
|
|
implements Partial<ILifetime> {
|
|
|
|
/**
|
|
* 导航栏高度补偿
|
|
*/
|
|
public static readonly StatusBarHeightExtend:number = 2;
|
|
|
|
/**
|
|
* 页面日志输出标签
|
|
*/
|
|
public static readonly StatusBarLabel = new LogLabel(
|
|
"StatusBar", NormalStyle
|
|
);
|
|
|
|
data = {
|
|
|
|
// 导航栏高度
|
|
barHeight: 65,
|
|
|
|
// 状态栏高度
|
|
barTop: 20,
|
|
|
|
// 胶囊占位
|
|
capsule: 94
|
|
};
|
|
|
|
/**
|
|
* 设置顶部状态栏高度
|
|
*/
|
|
public setHeight() {
|
|
|
|
let systemInfo = wx.getSystemInfoSync();
|
|
let headerPos = wx.getMenuButtonBoundingClientRect();
|
|
|
|
//状态栏高度
|
|
let statusBarHeight = Number(systemInfo.statusBarHeight);
|
|
|
|
// 胶囊实际位置，坐标信息不是左上角原点
|
|
let btnPosI = {
|
|
|
|
// 胶囊实际高度
|
|
height: headerPos.height,
|
|
width: headerPos.width,
|
|
|
|
// 胶囊top - 状态栏高度
|
|
top: headerPos.top - statusBarHeight,
|
|
|
|
// 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度）
|
|
bottom: headerPos.bottom - headerPos.height - statusBarHeight,
|
|
|
|
// 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right
|
|
right: systemInfo.windowWidth - headerPos.right
|
|
}
|
|
|
|
// 计算顶部导航栏高度
|
|
let barHeight = btnPosI.height + btnPosI.top + btnPosI.bottom;
|
|
|
|
// 计算胶囊展位
|
|
let capsule = btnPosI.right + btnPosI.width;
|
|
|
|
this.setData({
|
|
|
|
// 不知道为什么总是差 4px 距离
|
|
// 别问为什么 加上就对了
|
|
barHeight: barHeight + 4 + StatusBar.StatusBarHeightExtend,
|
|
barTop: statusBarHeight - StatusBar.StatusBarHeightExtend,
|
|
capsule: capsule
|
|
});
|
|
|
|
Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px, ` +
|
|
`状态栏高度: ${ statusBarHeight }px, 胶囊占位: ${ capsule }px`,
|
|
LevelLogLabel.InfoLabel, StatusBar.StatusBarLabel);
|
|
|
|
}
|
|
|
|
public onLoad() {
|
|
|
|
Logger.log("StatusBar 模块加载...",
|
|
LevelLogLabel.InfoLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
|
|
|
|
this.setHeight();
|
|
}
|
|
|
|
}
|
|
|
|
export default StatusBar;
|
|
export { StatusBar }; |