↩︎ 前文提要

安全距离适配容器 -mp-safe-layout

如果容器本身具有下边距，就需要考虑默认的安全距离与容器的下边距相加的情况。

举个例子，假设有一个列表页，在没有底部安全区域的情况下，你希望在底部留出 20rpx 的间距。然而，当有安全区域存在时，如果使用 mp-safe-area，那已经提供足够的留白空间，再加上容器本身的 20rpx 就会显得过多。

对于这种情况，无论是使用 CSS 变量 safe-area-inset-bottom 还是 mp-safe-area，我们都需要进行一些条件判断，以动态设置容器本身的下边距。例如，当存在 mp-safe-area 占用空间时，需要将容器的 padding-bottom 设置为 0。

也许你曾编写过类似的代码：

<template>
  <view class="page" :class="{'is-ipx': isIpx()}"> ... </view>
</template>

<style>
.page {
  padding-bottom: 20rpx;
}

.page.is-ipx {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>

针对这种情况，我们特别封装了一个组件，以解决这类问题。你只需要使用 mp-safe-layout：

<template>
  <!-- 当没有安全区域时，下边距为 20；当存在安全区域时，下边距为 safe-area-inset-bottom -->
  <mp-safe-layout class="page" :bottom="20"> ... </mp-safe-layout>
</template>

TIP

通常情况下，mp-safe-layout 适用于大多数场景，特别是在涉及底部安全区域的情况下。但当 mp-safe-layout 无法满足特定需求时，可以考虑使用 mp-safe-area。要注意区分两者的用途，正确使用合适的组件。

相关文档

• mp-safe-area - 组件
• mp-safe-layout - 组件