EveryLike/pages/CSS/function/function.uvue

<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>
	export default {
		data() {
			return {
        safeareaInsetTop: 0,
        safeareaInsetLeft: 0,
        safeareaInsetRight: 0,
        safeareaInsetBottom: 0,
			}
		},
		methods: {

		},
    onReady() {
      this.safeareaInsetTop=this.$page.safeAreaInsets.top;
      this.safeareaInsetLeft=this.$page.safeAreaInsets.left;
      this.safeareaInsetRight=this.$page.safeAreaInsets.right;
      this.safeareaInsetBottom=this.$page.safeAreaInsets.bottom;
    },
    onResize() {
      this.safeareaInsetTop=this.$page.safeAreaInsets.top;
      this.safeareaInsetLeft=this.$page.safeAreaInsets.left;
      this.safeareaInsetRight=this.$page.safeAreaInsets.right;
      this.safeareaInsetBottom=this.$page.safeAreaInsets.bottom;
    }
	}
</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>