更新记录

1.0.0（2025-12-07） 下载此版本

appx-section 是基于 UniappX 开发的通用区块组件，用于快速实现带装饰性标题（主 / 副标题）+ 内容区的页面区块布局，支持自定义装饰样式、标题样式及内容区内边距，适配多端展示，仅使用 flex 布局实现样式控制，无冗余 display 属性。

平台兼容性

uni-app x(4.87)

appx-section 组件帮助文档

组件介绍

appx-section 是基于 UniappX 开发的通用区块组件，用于快速实现带装饰性标题（主/副标题）+ 内容区的页面区块布局，支持自定义装饰样式、标题样式及内容区内边距，适配多端展示，仅使用 flex 布局实现样式控制，无冗余 display 属性。

组件特性

1. 支持 3 种装饰元素（竖线、圆形、方形），装饰色与主标题颜色联动；
2. 主/副标题独立配置，支持自定义字号、颜色；
3. 内容区 padding 灵活配置（布尔值/自定义字符串）；
4. 纯 flex 布局实现，适配多端样式统一；
5. 按需渲染，无标题时自动隐藏标题区域。

基础用法

最简使用示例

<template>
  <appx-section type="line" title="基础区块标题">
    <view>这是区块内容区域</view>
  </appx-section>
</template>

API 参考

Props（属性）

插槽

高级使用示例

示例 1：带圆形装饰+自定义标题样式

<appx-section 
  type="circle" 
  title="自定义样式标题"
  titleColor="#1989fa"
  titleFontSize="16px"
  subTitle="这是自定义颜色的副标题"
  subTitleColor="#666"
>
  <view style="display: flex; flex-direction: column;">
    <text>内容区自定义内容</text>
    <text style="margin-top: 8rpx;">支持多行文本/组件嵌套</text>
  </view>
</appx-section>

示例 2：仅副标题+方形装饰+自定义内容区padding

<appx-section 
  type="square" 
  subTitle="仅展示副标题"
  padding="16rpx 10rpx"
>
  <view style="background: #f5f5f5; padding: 10rpx;">
    <text>内容区设置了 16rpx 左右、10rpx 上下内边距</text>
  </view>
</appx-section>

示例 3：无装饰+内容区默认padding

<appx-section 
  title="无装饰标题"
  subTitle="无装饰元素，内容区启用默认padding"
  :padding="true"
>
  <view>内容区 padding 为默认 10px</view>
</appx-section>

样式说明

1. 组件整体宽度 100%，盒模型为 border-box；
2. 标题区域与内容区默认间距 12rpx，标题区域内装饰元素与标题容器间距 8px；
3. 主/副标题同时存在时，副标题顶部间距 4rpx；
4. 装饰元素颜色默认与主标题颜色一致，无主标题时为 #333；
5. 所有元素仅使用 flex/none 作为 display 属性，保证多端样式统一。

注意事项

1. 字体大小/内边距单位建议统一使用 px 或 rpx，避免多端适配问题；
2. 装饰元素仅在 type 为有效值（line/circle/square）时渲染；
3. 副标题仅在有值时渲染，无主标题时单独展示；
4. 内容区插槽建议使用 flex 布局嵌套子元素，保持与组件整体布局逻辑一致。