uniapp vue3 setup如何兼容顶部状态栏高度

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();

  const radio = sysInfo.windowWidth / 750; //rpx率

  globalStore.setStatusBarHeight(Math.round(sysInfo.statusBarHeight / radio));

};

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 + 'rpx';

  } else {

    return '0rpx';

  }

});

将数值绑至相关标签内

<view :style="{ paddingTop: safeAreaTop }"></view>

到此问题解决