El título personalizado del applet calcula dinámicamente la altura.
A la hora de personalizar el centrado del título y el botón de la cápsula, es necesario calcular dinámicamente la altura del título para que el título y el botón de la cápsula queden centrados arriba y abajo.
El requisito es que el fondo superior cubra la barra de estado, por lo que el título debe colocarse en la imagen de fondo. Cada página es diferente, así que use dinámico stylepara establecer el estilo del título personalizado.
También puede extraer componentes para separar la barra de estado y la parte del título según sus necesidades , y uni.getSystemInfoSync()puede obtener información como la altura de la barra de estado.
Tómalo uni-appcomo ejemplo (WeChat es unicambiarlo wxa acción, el método es el mismo)
1. Use para uni.getMenuButtonBoundingClientRect()obtener la distancia desde la parte superior del botón de la cápsula y la altura del botón de la cápsula
2. Controle la posición del título personalizado topconfigurando la suma dinámica del títuloline-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"// 标题的跟胶囊按钮上下居中
};
};
El efecto se muestra en la figura:
