You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.1 KiB
83 lines
2.1 KiB
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { nextTick, ref } from "vue";
|
|
import { useHeight, useRect } from "@/libs/utils";
|
|
import useStore from "@/store";
|
|
|
|
const store = useStore();
|
|
|
|
const safeHeight = ref({
|
|
status: 0, // 状态栏高度 手机顶部安全距离
|
|
menu: 0, // 导航栏高度 小程序的胶囊 移动端的titlte
|
|
screen: 0, // 屏幕高度
|
|
content: 0, // 内容高度
|
|
bottom: 0, // 底部高度
|
|
});
|
|
|
|
onLoad(() => {
|
|
store.fontScale = uni.getStorageSync("fontScale") || 1;
|
|
const height = useHeight();
|
|
|
|
safeHeight.value.status = height.status;
|
|
safeHeight.value.menu = height.menu;
|
|
safeHeight.value.screen = height.screen;
|
|
safeHeight.value.content = height.content;
|
|
safeHeight.value.bottom = height.bottom;
|
|
safeHeight.value.tabbar = height.tabbar;
|
|
|
|
// #ifdef H5|APP-PLUS
|
|
// nextTick(async () => {
|
|
// const rect = await useRect(".h5Title");
|
|
// if (rect) {
|
|
// safeHeight.value.menu = rect.height;
|
|
// }
|
|
// });
|
|
|
|
// #endif
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
:style="{
|
|
'--font-scale': store.fontScale,
|
|
}"
|
|
>
|
|
<slot
|
|
:status="safeHeight.status"
|
|
:menu="safeHeight.menu"
|
|
:screen="safeHeight.screen"
|
|
:bottom="safeHeight.bottom"
|
|
:tabbar="safeHeight.tabbar"
|
|
:content="safeHeight.content"
|
|
:style="{
|
|
height: safeHeight.menu ? `${safeHeight.menu}px` : '40px',
|
|
paddingTop: `${safeHeight.status}px`,
|
|
backgroundColor: '#f8f8f8',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}"
|
|
:fix-style=" {
|
|
height: safeHeight.menu ? `${safeHeight.menu}px` : '40px',
|
|
paddingTop: `${safeHeight.status}px`,
|
|
backgroundColor: '#f8f8f8',
|
|
width: '100%',
|
|
position: 'fixed',
|
|
top: 0,
|
|
zIndex: 99,
|
|
left: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
} "
|
|
:pad-style="{
|
|
paddingTop: `${safeHeight.status + (safeHeight.menu || 40) + 5}px`,
|
|
height: `${safeHeight.menu || 40}px`,
|
|
}"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '../../uni.scss';
|
|
</style>
|