SafeBottom 底部安全区

17:06

说明

底部安全区占位组件。取设备底部安全区插入距离 safeAreaInsets.bottom 撑起等高的占位块（单位 px），把内容顶离底部指示条；非全面屏机型安全区为 0 时高度为 0、不占位。uni-app x 的 UCSS 不支持 env()，高度改由 JS 计算。

兼容性

平台	支持情况
App	✅ 支持（带底部指示条的机型撑起安全区高度）
H5	✅ 支持（浏览器无系统安全区，高度为 0）
微信小程序	✅ 支持

示例

基础用法

底部安全区占位组件，自动适配安全区域高度。

查看源码

<template>
    <view class="content">
        <text>内容区域</text>
    </view>
    <!-- 自动适配底部安全区，非全面屏机型高度为 0 -->
    <ux-safe-bottom />
</template>

<style scoped>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
</style>

自定义样式 custom-style

通过 custom-style 可以设置背景色等自定义样式。

查看源码

<template>
    <view class="content">
        <text>内容区域</text>
    </view>
    <ux-safe-bottom :custom-style="{ backgroundColor: '#f56c6c' }" />
</template>

<style scoped>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
</style>

自定义类名 custom-class

通过 custom-class 可以添加自定义样式类。

查看源码

<template>
    <view class="content">
        <text>内容区域</text>
    </view>
    <ux-safe-bottom custom-class="custom-safe-bottom" />
</template>

<style scoped>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
.custom-safe-bottom {
    background-color: #2979ff;
}
</style>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-

Events

ux-safe-bottom 无事件。

Slots

ux-safe-bottom 无插槽。

注意事项

• 高度取自 safeAreaInsets.bottom（单位 px），无底部安全区的机型（非全面屏、H5 浏览器）高度为 0、组件不可见，属正常表现。
• 高度由 JS 计算（uni-app x 的 UCSS 不支持 env()），useWindowInfo 在 onMounted 后延迟刷新一次，App 端首次布局可能有一次高度更新。
• 组件宽度固定 100%、背景默认透明，常配合 custom-style 设置背景色，用 custom-class 追加样式类。
• 组件无事件、无插槽。