Gap 间隔槽

17:06

说明

内容块之间的间距占位。渲染一个占满整行的空白块，用 height 撑开高度、margin-top / margin-bottom 追加外部间距；bg-color 可填充分隔条颜色，默认 transparent 透明（此时不写背景样式）。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

不传参时高度 15px、背景透明，直接插在两个内容块之间撑开间距。

查看源码

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

自定义高度 height

height 设置间隔块高度，传数值按 px 处理（示例为 40px）。

查看源码

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="40"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

背景颜色 bg-color

bg-color 非 transparent 时填充背景色，示例用红色分隔条（height="20"）。

查看源码

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="20" bg-color="#f56c6c"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

上下间距 margin-top / margin-bottom

在 height 之外，margin-top / margin-bottom 再追加与上下内容块的距离（示例各 20px）。

查看源码

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="15" margin-top="20" margin-bottom="20"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

透明背景（默认）

bg-color="transparent" 为默认值，此时组件不写背景样式，仅撑高不显色。

查看源码

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="15" bg-color="transparent"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
bgColor	背景颜色	string	'transparent'	-
height	高度	string | number	15	-
marginTop	与上一个组件的距离	string | number	0	-
marginBottom	与下一个组件的距离	string | number	0	-

Events

ux-gap 无事件。

Slots

ux-gap 无插槽。

注意事项

• height / margin-top / margin-bottom 传数值（或不带单位的数字字符串）时按 px 处理，已带单位的字符串（如 "2em"）原样使用。
• bg-color 默认为 transparent，此时组件不写背景样式，块完全透明、只起撑高作用；要显示分隔色需传具体颜色值。
• 根节点宽度固定 100%，height 为 0 时块不可见。
• 组件无事件、无插槽。