标签加样式加动态计算实现效果

状态栏高度

获取系统信息里的状态栏高度

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;//系统信息里的状态栏高度

胶囊按钮的信息

用到胶囊按钮的top、height

const menuButtonInfo= uni.getMenuButtonBoundingClientRect();//胶囊按钮信息

计算顶部边距

上下有边距所以要除以2

顶部边距 = 胶囊按钮的top - (胶囊按钮的高度 - 状态栏高度) / 2

const titleTop = menuButtonInfo.top - (menuButtonInfo.height - statusBarHeight) / 2;//标题父元素边距高度

模板

<view  :style="{paddingTop: titleTop + 'px'}"><view class="main-title" :style="{height: sBarHeight +'px'}">{{tenantName}}</view>
</view>

到这已经框对齐胶囊按钮了，但是字体内容还没对齐

样式

写样式对齐

.main-title {/*必要 对齐胶囊按钮*/display: flex;align-items: center;}

vue2代码

 titleTop: 0,statusBarHeight: 0,onReady() {let that = this;// 获取胶囊按钮位置信息const menuButtonInfo = uni.getMenuButtonBoundingClientRect();const { top, height } = menuButtonInfo;const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;// 计算标题需要偏移的位置const titleTop = top + (height - statusBarHeight) / 2;this.titleTop = titleTop;//设置标题顶部距离this.statusBarHeight = statusBarHeight;//设置状态栏高度},<view class="indexPage" :style="{paddingTop: titleTop + 'px'}"><view class="main-title" :style="{height: sBarHeight +'px'}">{{tenantName}}</view>
</view>.main-title {/*必要 对齐胶囊按钮*/display: flex;align-items: center;
}

vu3代码

const sBarHeight = ref<any>(uni.getSystemInfoSync().statusBarHeight)
const titleTop = ref<any>(0)import {onLoad,  } from '@dcloudio/uni-app'
onLoad(async (options: any) => {const menu = uni.getMenuButtonBoundingClientRect()titleTop.value = menu.top + (menu.height - sBarHeight.value) / 2;//顶部标题对齐console.log("✈️menu===", menu);})<view class="indexPage" :style="{paddingTop: titleTop + 'px'}"><view class="main-title" :style="{height: sBarHeight +'px'}">{{tenantName}}</view>
</view>.main-title {/*必要 对齐胶囊按钮*/display: flex;align-items: center;
}