The applet custom title dynamically calculates the height
When it comes to customizing the centering of the title and the capsule button, it is necessary to dynamically calculate the height of the title so that the title and the capsule button are centered up and down
The requirement is that the top background covers the status bar, so the title needs to be positioned on the background image. Each page is different, so use dynamic styleto set the style of the custom title
You can also extract components to separate the status bar and the title part according to your needs , and uni.getSystemInfoSync()you can get information such as the height of the status bar
Take uni-appit as an example (WeChat is to unichange it wxinto action, the method is the same)
1. Use to uni.getMenuButtonBoundingClientRect()get the distance from the top of the capsule button and the height of the capsule button
2. Control the position of the custom title topby setting the dynamic sum of the titleline-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"// 标题的跟胶囊按钮上下居中
};
};
The effect is shown in the figure:
