获取微信小程序标题栏高度 和 胶囊的平行位置

获取微信小程序标题栏高度 和 胶囊的平行位置

//标题栏高度
<view class="intro" :style="[
        {
          paddingTop: Number(systemBarHeight + 88) + 'rpx',
        },]">
</view>
 
 //胶囊的平行位置
<view class="header"
   :style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">
			首页
</view>
            
                       
import {
		computed,
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';    
   const systemBarHeight = ref('')
   const navBarTop = ref('')
   const navBarHeight = ref('')
// 标题栏高度
	const getNavBar = () => {
		let statuBar = uni.getSystemInfoSync().statusBarHeight;
		systemBarHeight.value = statuBar + 44
        
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		console.log(menuButtonInfo)
		navBarTop.value = menuButtonInfo.top;
		navBarHeight.value = menuButtonInfo.height;
	};