关闭原生的顶部栏
// 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>