沉浸式适配 | 宇信科技-新一代移动金融开发平台YUMP

# 沉浸式适配

在手机屏幕上面显示内容时，我们总是会遇到这样的一个问题，我们所展示的内容会被手机系统的状态栏或者底部虚拟导航栏遮挡，我们如何避免这个问题，就是沉浸式适配，使我们显示的内容给手机顶部状态栏和底部导航栏预留出足够的空间，防止遮挡。

# 沉浸式顶部遮挡图

#

# 沉浸式底部遮挡图

#

# 顶部适配方案

首先我们需要获取到顶部状态栏的高度，并将这部分空间预留出来；首先我们根据api getSystemInfo 获取到状态栏的高度与安全区域；然后判断顶部安全区域与状态栏高度的大小，取两者的最大值，然后设置预留出空间;

this.$app.getSystemInfo().then(res => {
      this.safeArea = res.safeAreaInsets
      this.statutsBarHeight = res.statusbarHeight
      this.topMargin = this.safeArea.top > this.statutsBarHeight ? this.safeArea.top : this.statutsBarHeight
    })

# 适配后顶部效果图

#

# 底部适配方案

首先我们需要获取到底部导航栏的高度，并将这部分空间预留出来；首先我们根据api getSystemInfo 获取到安全区域；取出底部安全区域高度，然后设置预留出空间;

this.$app.getSystemInfo().then(res => {
      this.safeArea = res.safeAreaInsets
      this.statutsBarHeight = res.statusbarHeight
      this.topMargin = this.safeArea.top > this.statutsBarHeight ? this.safeArea.top : this.statutsBarHeight
    })

# 沉浸式底部适配效果图

#

# 完整代码

<template>
    <!--为根布局设置底部padding,为底部虚拟导航栏预留出位置-->
    <div id="immersive" :style="{paddingBottom:safeArea.bottom+'px'}">
      <!--顶部title，背景色或者背景图片顶到顶部，但是标题内容需要空出状态栏的间距-->
      <div :style="{backgroundColor: 'red',boxSizing:'border-box',height: '72px',paddingTop: topMargin+'px'}">
        <div style="height: 100%;display:flex;">
          <van-icon style="margin-left:10px" name="arrow-left" size="20px"/>
          <div style="font-size: 18px;position: absolute;width: 100%;text-align: center">我是title</div>
        </div>
      </div>
      <div style="">
        <div style="height: 200px;background-color: #00dc68">内容1</div>
        <div style="height: 400px;background-color: #4abf8a">内容2</div>
        <div style="height: 300px;background-color: #95CDF9">内容3</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'immersive',
  data() {
    return {
      safeArea: {
        right: 0,
        left: 0,
        top: 0,
        bottom: 0,
        isBottomBarShow: false
      },
      statutsBarHeight: 0,
      topMargin: 0
    }
  },
  mounted() {
    this.$app.getSystemInfo().then(res => {
      this.safeArea = res.safeAreaInsets
      this.statutsBarHeight = res.statusbarHeight
      this.topMargin = this.safeArea.top > this.statutsBarHeight ? this.safeArea.top : this.statutsBarHeight
    })
  }
}
</script>

<style scoped>

</style>

← 软登录