uniapp vue3 setup如何兼容顶部状态栏高度
思路是调用uni.getSystemInfoSync()，然后存到状态管理里，再将headerbar的padding-top加上安全区数值，如下：
store/global.js 状态管理
import { defineStore } from 'pinia'
export const useGlobalStore = defineStore('global', {
state: () => ({
statusBarHeight: 0, // 状态栏高度
}),
actions: {
setStatusBarHeight(height) {
this.statusBarHeight = height
}
},
})
app.vue
<script setup>
import { useGlobalStore } from '@/store/global';
import { onLaunch } from '@dcloudio/uni-app';
const globalStore = useGlobalStore();
const getNavBarHeight = () => {
let sysInfo = uni.getSystemInfoSync();
globalStore.setStatusBarHeight(sysInfo.safeArea.top);
};
onLaunch(() => {
// #ifndef H5
getNavBarHeight();
// #endif
});
</script>
pub-header.vue 公用顶部组件
<script setup>
import { computed } from 'vue';
import { useGlobalStore } from '@/store/global';
const globalStore = useGlobalStore();
let safeAreaTop = computed(() => {
if (globalStore.statusBarHeight) {
return globalStore.statusBarHeight + 'px';
} else {
return '0px';
}
});
将数值绑至相关标签内
<view :style="{ paddingTop: safeAreaTop }"></view>
到此问题解决
