Add StatusBar Modular Fix some BUG Add LoggerText feature
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
import { Modular, Manager, ILifetime } from "../../core/Module";
|
||||
import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetLogLabel";
|
||||
import { LogLabel } from "../../core/LogLabel";
|
||||
import { Logger } from "../../core/Logger";
|
||||
|
||||
/**
|
||||
* 顶部状态栏
|
||||
*/
|
||||
class StatusBar<M extends Manager> extends Modular<M, {}>
|
||||
implements Partial<ILifetime> {
|
||||
|
||||
/**
|
||||
* 页面日志输出标签
|
||||
*/
|
||||
public static readonly StatusBarLabel = new LogLabel(
|
||||
"StatusBar", colorRadio(255, 230, 222)
|
||||
);
|
||||
|
||||
data = {
|
||||
|
||||
// 状态栏高度
|
||||
barHeight: 65,
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置顶部状态栏高度
|
||||
*/
|
||||
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 + statusBarHeight + btnPosI.bottom
|
||||
|
||||
this.setData({
|
||||
|
||||
// 不知道为什么总是差 4px 距离
|
||||
// 别问为什么 加上就对了
|
||||
barHeight: barHeight + 4
|
||||
});
|
||||
|
||||
Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`,
|
||||
LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel);
|
||||
|
||||
}
|
||||
|
||||
public onLoad() {
|
||||
Logger.log("StatusBar模块加载...",
|
||||
LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
|
||||
|
||||
this.setHeight();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default StatusBar;
|
||||
export { StatusBar };
|
||||
@@ -1,3 +1,9 @@
|
||||
// view.status-bar {
|
||||
// // background-color: antiquewhite;
|
||||
// }
|
||||
view.status-bar {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
view.status-bar {
|
||||
background-color: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,85 +1,10 @@
|
||||
import { Logger } from "../../core/Logger";
|
||||
import { LevelLogLabel, LifeCycleLogLabel } from "../../core/PresetLogLabel";
|
||||
import { Manager, Modular, AnyWXContext, ILifetime } from "../../core/Module";
|
||||
|
||||
let manager;
|
||||
|
||||
// Page({
|
||||
|
||||
// /**
|
||||
// * 课程表页面加载
|
||||
// */
|
||||
// onLoad: async function (query) {
|
||||
|
||||
// manager = new Manager(this);
|
||||
// console.log(manager);
|
||||
|
||||
|
||||
// // this.setData;
|
||||
|
||||
// // Logger.log("课程表 (Timetable) 页面加载...",
|
||||
// // LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel);
|
||||
|
||||
// // let systemInfo = wx.getSystemInfoSync();
|
||||
|
||||
// // //状态栏高度
|
||||
// // let statusBarHeight = Number(systemInfo.statusBarHeight);
|
||||
|
||||
// // let menu = wx.getMenuButtonBoundingClientRect()
|
||||
|
||||
// // //导航栏高度
|
||||
// // let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
|
||||
|
||||
// // //状态栏加导航栏高度
|
||||
// // let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
|
||||
|
||||
// // console.log('状态栏高度',statusBarHeight)
|
||||
|
||||
// // console.log('导航栏高度',navBarHeight)
|
||||
|
||||
// // console.log('状态栏加导航栏高度',navStatusBarHeight)
|
||||
|
||||
// // this.setData({barh: navStatusBarHeight});
|
||||
|
||||
// }
|
||||
|
||||
// })
|
||||
|
||||
import { Manager} from "../../core/Module";
|
||||
import { StatusBar } from "./StatusBar";
|
||||
|
||||
/**
|
||||
* 此页面使用 Manager 进行模块化管理
|
||||
* 若要添加先功能请先定义 Modular 并添加至 Manager
|
||||
*/
|
||||
Manager.Page((manager)=>{
|
||||
let m1 = manager.addModule(M1, "m1");
|
||||
let m2 = manager.addModule(M2, "m2", {m1});
|
||||
})
|
||||
|
||||
|
||||
class M1<M extends Manager> extends Modular<M, {}> implements Partial<ILifetime> {
|
||||
|
||||
data = {
|
||||
a:1,
|
||||
b:{}
|
||||
}
|
||||
|
||||
public onLoad(){
|
||||
|
||||
}
|
||||
|
||||
public onReady() {
|
||||
console.log(this);
|
||||
this.emit("lll", {a:1})
|
||||
}
|
||||
}
|
||||
|
||||
class M2<M extends Manager> extends Modular<M, {m1:M1<M>}> {
|
||||
|
||||
data = {
|
||||
a: 1
|
||||
}
|
||||
|
||||
public onLoad() {
|
||||
this.setData({a:1});
|
||||
this.depends?.m1.on("lll", (e)=>{
|
||||
console.log(e)
|
||||
})
|
||||
console.log(this);
|
||||
}
|
||||
}
|
||||
manager.addModule(StatusBar, "statusBar");
|
||||
})
|
||||
@@ -1,3 +1,5 @@
|
||||
<view class="status-bar" style="height:{{barh}}px"></view>
|
||||
|
||||
<text>pages/Timetable/Timetable.wxml{{m1$a}}</text>
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="status-bar" style="height: {{ statusBar$barHeight }}px"></view>
|
||||
|
||||
<text>afdff</text>
|
||||
Reference in New Issue
Block a user