40 lines
765 B
Vue
40 lines
765 B
Vue
|
<template>
|
||
|
|
<view class="status-bar" :style="{ height: `${statusBarHeight}px`, backgroundColor : bgColor }">
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "headerHeight",
|
||
|
|
props: {
|
||
|
|
bgColor: {
|
||
|
|
type: String,
|
||
|
|
default: () => "transparent",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
statusBarHeight: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.statusBarHeight = this.getStatusBarHeight()
|
||
|
|
},
|
||
|
|
activated() {
|
||
|
|
this.statusBarHeight = this.getStatusBarHeight()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getStatusBarHeight() {
|
||
|
|
const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
|
||
|
|
uni.setStorageSync('BarHeight', systemInfo.statusBarHeight)
|
||
|
|
return systemInfo.statusBarHeight || 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.status-bar {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|