Der benutzerdefinierte Titel des Applets berechnet die Höhe dynamisch
Wenn Sie die Zentrierung des Titels und der Kapselschaltfläche anpassen möchten, ist es notwendig, die Höhe des Titels dynamisch zu berechnen, damit der Titel und die Kapselschaltfläche nach oben und unten zentriert sind
Voraussetzung ist, dass der obere Hintergrund die Statusleiste abdeckt, sodass der Titel auf dem Hintergrundbild positioniert werden muss. Jede Seite ist anders. Verwenden Sie daher „Dynamic“, um styleden Stil des benutzerdefinierten Titels festzulegen
Sie können auch Komponenten extrahieren, um die Statusleiste und den Titelteil entsprechend Ihren Anforderungen zu trennen , und uni.getSystemInfoSync()Sie können Informationen wie die Höhe der Statusleiste abrufen
Nehmen Sie uni-appes als Beispiel (WeChat soll unies wxin die Tat umsetzen, die Methode ist dieselbe)
1. Verwenden Sie , um uni.getMenuButtonBoundingClientRect()den Abstand von der Oberseite des Kapselknopfs und die Höhe des Kapselknopfs zu ermitteln
2. Steuern Sie die Position des benutzerdefinierten Titels top, indem Sie die dynamische Summe des Titels festlegenline-height
<view class="title" :style="{ top: navTitleHeight.top, lineHeight: navTitleHeight.lineHeight }">
预警通知
</view>
/**
* 自定义标题高度动态计算
*/
const getNavbarTitleHeight = () => {
// 获取顶部状态栏高度
// const { statusBarHeight } = uni.getSystemInfoSync();
// 获取胶囊按钮距离顶部的top高度和按钮的高度
const {
top, height } = uni.getMenuButtonBoundingClientRect();
const navTitleTop = top;
return {
top: navTitleTop + "px",// 定位距离顶部的高度
lineHeight: height + "px"// 标题的跟胶囊按钮上下居中
};
};
Der Effekt ist in der Abbildung dargestellt:
