59 行
1.8 KiB
Plaintext
59 行
1.8 KiB
Plaintext
<template>
|
|
<view class="padding-safe-area-inset">
|
|
<view class="text-background">我在状态栏下边</view>
|
|
<view class="content">
|
|
<text>此页面使用env()函数适配安全区域，仅在app平台生效。</text>
|
|
<text>safe-area-inset-top: {{safeareaInsetTop}}px</text>
|
|
<text>safe-area-inset-left: {{safeareaInsetLeft}}px</text>
|
|
<text>safe-area-inset-right: {{safeareaInsetRight}}px</text>
|
|
<text>safe-area-inset-bottom: {{safeareaInsetBottom}}px</text>
|
|
</view>
|
|
<view class="text-background">我在导航栏上边</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
|
|
const safeareaInsetTop = ref(0)
|
|
const safeareaInsetLeft = ref(0)
|
|
const safeareaInsetRight = ref(0)
|
|
const safeareaInsetBottom = ref(0)
|
|
|
|
const instance = getCurrentInstance()
|
|
|
|
onReady(() => {
|
|
const page = instance?.proxy?.$page
|
|
safeareaInsetTop.value = page?.safeAreaInsets.top ?? 0
|
|
safeareaInsetLeft.value = page?.safeAreaInsets.left ?? 0
|
|
safeareaInsetRight.value = page?.safeAreaInsets.right ?? 0
|
|
safeareaInsetBottom.value = page?.safeAreaInsets.bottom ?? 0
|
|
})
|
|
|
|
onResize((options) => {
|
|
const page = instance?.proxy?.$page
|
|
safeareaInsetTop.value = page?.safeAreaInsets.top ?? 0
|
|
safeareaInsetLeft.value = page?.safeAreaInsets.left ?? 0
|
|
safeareaInsetRight.value = page?.safeAreaInsets.right ?? 0
|
|
safeareaInsetBottom.value = page?.safeAreaInsets.bottom ?? 0
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.text-background {
|
|
background-color: red;
|
|
}
|
|
.padding-safe-area-inset {
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
/* #ifdef APP */
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
/* #endif */
|
|
}
|
|
.content{
|
|
padding: 20px;
|
|
}
|
|
</style>
|