uniapp vue3 微信小程序 获取状态栏高度和右上角设置（胶囊按钮）高度_vue获取手机状态栏高度

关闭原生的顶部栏

// pages.json
 
"pages": [{
    "path": "pages/home/index",
    "style": {
        "navigationStyle": "custom",
        "app-plus": {
            "titleView": false
        }
    }
},
}]

页面加载时获取胶囊高度和状态栏高度

<template>
	<view class="bg">
		<view :style="{ paddingTop: topPadding }"></view>
	</view>
</template>

<script setup>
  import {
    ref,
    reactive,
    toRefs,
    onBeforeMount,
    onMounted,
    onUpdated,
    onBeforeUpdate,
    onBeforeUnmount,
    onUnmounted,
    computed,
    watch,
  }
  from 'vue'import {
    onLoad,
    onShow,
    onPullDownRefresh,
    onReachBottom,
  }
  from '@dcloudio/uni-app'
    let topPadding = ref('0px') 
    const getHeight = () = >{
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight,
    customHeight = wx.getMenuButtonBoundingClientRect(),
    navigationBarHeight = customHeight.height + (customHeight.top - statusBarHeight) * 2 
    topPadding.value = `$ {navigationBarHeight + statusBarHeight}px`
    console.log(statusBarHeight, customHeight, topPadding)
  }
  onLoad(() = >{
    getHeight()
  })
</script>