深浅模式
布局导航组件
本篇介绍 布局导航 分类下的 5 个组件：轮播图、图片布局、金刚区、搜索栏、筛选标签。它们负责首页顶部的视觉焦点、快捷入口与内容筛选。
通用说明
组件宽高、外边距等请在选中组件后切换到 样式 Tab 调整。各图片项、导航项的 点击动作 配置方式见 样式与点击动作 — 点击动作。
轮播图
组件说明： 多张图片自动或手动轮播，常用于首页顶部 Banner。
适用页面
| 页面类型 | 是否可用 |
|---|---|
| 应用首页、功能页面、自定义页面 | ✅ |
| 社区圈子、服务表单 | ❌ |
如何添加
- 左侧 布局导航 → 轮播图
- 在 图片列表 中点 + 添加图片，从媒体库选择
- 为每张图单独设置 点击动作（如活动页、外链）
- 在 样式 → 高度 设置轮播区域高度（常用
300～360rpx）
属性配置
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 图片列表 | 轮播项，每项含图片与点击动作 | 2～5 张活动图 |
| 图片模式 | 单张图的填充方式 | aspectFill（裁剪填充，常用） |
| 图片圆角 | 每张图的圆角，rpx | 0、16 |
| 轮播间隔 | 自动切换间隔，毫秒 | 3000（3 秒） |
| 动画时长 | 切换动画时长，毫秒 | 500 |
| 自动播放 | 是否自动轮播 | 开启 |
| 循环 | 播到最后一张后回到第一张 | 开启 |
| 纵向 | 纵向滑动轮播（少见） | 一般关闭 |
| 显示指示器 | 底部小圆点/条 | 开启 |
| 指示器位置 | 在轮播内部或外部 | 内部 / 外部 |
| 指示器对齐 | 指示器水平位置 | 左 / 中 / 右 |
| 指示器默认颜色 | 未选中点颜色 | 半透明白 #ffffff66 |
| 指示器激活颜色 | 当前页指示点颜色 | #ffffff |
| 指示器底部距离 | 距轮播底部的距离，rpx | 20 |
| 指示器左右边距 | 指示器区域左右留白 | 0 |
| 指示器宽 / 高 | 单个指示点尺寸，rpx | 12 × 12 |
| 指示器激活宽度 | 当前项可拉长为条 | 留空同默认宽度；24 |
| 指示器圆角 / 间距 | 指示点形状与间隔 | 圆角 6、间距 8 |
样式建议
- 首页首屏：高度 320～400 rpx，左右 margin 各
24rpx + 圆角 16 rpx - 指示器选 内部 + 居中，浅色 Banner 用半透明白点
- 图片比例建议统一（如 2:1），避免切换时跳动
使用技巧 / 注意事项
- 至少添加 1 张 图片；仅 1 张时可关闭自动播放
- 每张图务必配置 点击动作，否则点击无效果
- 图片过多会增加首屏加载时间，建议 ≤5 张 并压缩体积
- 关闭 显示指示器 时，用户难以感知可滑动，单图场景可关
图片布局
组件说明： 按预设模板将 2～4 张图片拼成一块区域，适合活动入口、分类导购。
适用页面
| 页面类型 | 是否可用 |
|---|---|
| 应用首页、功能页面、自定义页面 | ✅ |
| 社区圈子、服务表单 | ❌ |
如何添加
- 左侧 布局导航 → 图片布局
- 先选 布局模式，再按提示数量添加图片
- 在 样式 → 高度 设置整体高度（未设时默认约 400 rpx）
属性配置
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 图片列表 | 各槽位图片及点击动作 | 见下方布局模式所需张数 |
| 布局模式 | 拼图样式 | 见下表 |
| 间距 | 图片之间的空隙，rpx | 20（默认）、12（紧凑） |
| 圆角 | 整块与各图的圆角，rpx | 16 |
| 内部圆角 | 拼接处是否圆角 | 自动 / 显示 / 隐藏 |
布局模式对照：
| 模式编号 | 名称 | 需要图片数 | 布局示意 |
|---|---|---|---|
| 1 | 左大右二 | 3 张 | 左侧一大块，右侧上下两块 |
| 2 | 左大右混 | 4 张 | 左侧一大块，右上长条 + 右下两格 |
| 3 | 左右对分 | 2 张 | 左右各一块等大 |
| 4 | 三列等宽 | 3 张 | 横排三等分 |
样式建议
- 模式 1、2 适合 一主多辅 的运营位（主图放活动，辅图放次要入口）
- 模式 3 适合 双入口对比；模式 4 适合 三个并列分类
- 高度固定为 350～450 rpx，避免不同设备上布局抖动
使用技巧 / 注意事项
- 当前布局需要几张图，编辑器会提示 「x/y 张」；不足的位置显示占位 +
- 内部圆角 → 自动：间距为 0 时隐藏内侧圆角，有间距时显示
- 每张图可单独设 点击动作
- 图片主体尽量居中，显示为 裁剪填充，避免重要内容被裁切
金刚区
组件说明： 图标 + 文字的宫格快捷入口，类似 App 首页「分类图标」。
适用页面
| 页面类型 | 是否可用 |
|---|---|
| 应用首页、功能页面、自定义页面 | ✅ |
| 社区圈子、服务表单 | ❌ |
如何添加
- 左侧 布局导航 → 金刚区
- 点 + 添加项目，为每项上传 图标、填写 标签、设置 点击动作
- 调整 每行列数 与图标大小
属性配置
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 导航项目 | 每项含图标、标签、点击动作 | 8～10 个常用功能 |
| 每行列数 | 一行显示几个 | 4（常见）、5（更密）、3（更疏） |
| 行间距 | 多行之间的垂直距离，rpx | 30 |
| 第二行 | 是否允许显示第二行 | 项目超过列数时自动换行 |
| 隐藏文字 | 只显示图标 | 极简风格时可开 |
| 图标大小 | 图标边长，rpx | 80 |
| 图标圆角 | 图标容器圆角 | 16（方角图标）、999（圆形） |
| 图标文字间距 | 图标与标签距离 | 16 |
| 文字大小 | 标签字号，rpx | 24 |
| 文字颜色 | 标签颜色 | #333333 |
| 文字字重 | 标签粗细 | 正常 / 中等 |
| 角标背景 | 项目角标底色（若业务有角标） | 品牌强调色 |
样式建议
- 首页常用 4 列 × 2 行 = 8 个 入口，图标风格统一（线性或面性一致）
- 图标尺寸 72～88 rpx，标签 2～4 个汉字
- 整块区域上下 margin
20rpx，与轮播、列表留出呼吸感
使用技巧 / 注意事项
- 每个项目必须配置 点击动作，否则点击无效
- 标签不宜过长，超出会换行或挤压布局
- 隐藏文字 适合用户已熟悉的图标，新功能建议保留文字
- 自定义页常通过金刚区入口进入，记得目标页已 启用 对应配置
搜索栏
组件说明： 带搜索图标、提示文字与可选「搜一搜」按钮、更多入口的搜索条。
适用页面
| 页面类型 | 是否可用 |
|---|---|
| 应用首页、功能页面、自定义页面 | ✅ |
| 社区圈子、服务表单 | ❌ |
如何添加
- 左侧 布局导航 → 搜索栏
- 配置 提示文字 与搜索框外观
- 设置 搜索框点击、更多按钮点击 的跳转目标
属性配置
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 左侧图标展示方式 | 搜索图标用字体或图片 | 字体图标（默认）/ 图片 |
| 搜索图标名 | 字体图标名称 | search，可点 选择 |
| 搜索图标前缀 | 特殊图标库前缀 | 一般留空 |
| 搜索图标颜色 | 图标颜色 | #999999 |
| 搜索图标图片 | 图片模式下的 URL | 品牌搜索 icon |
| 图标边长 | 左侧图标尺寸，rpx | 32 |
| 提示文字 | 输入框占位文案 | 搜索笔记、圈子、用户 |
| 提示字号 / 颜色 / 字重 | 占位文字样式 | 26、#999、正常 |
| 提示对齐 | 占位文字对齐 | 左对齐 / 居中 |
| 按钮文字 | 右侧「搜一搜」文案 | 搜一搜、搜索 |
| 按钮背景 / 文字颜色 | 右侧按钮配色 | 黑底 #000 + 白字 |
| 按钮字号 / 圆角 | 右侧按钮样式 | 26、圆角 50 |
| 边框颜色 / 粗细 | 搜索框边框 | #F5F5F5、粗细 2 |
| 搜索框圆角 / 背景色 | 输入区域外观 | 圆角 50、背景 #F8F8F8 |
| 显示更多 | 搜索栏右侧额外图标按钮 | 跳转菜单、消息等 |
| 更多区图标 | 更多按钮用字体或图片 | 同左侧逻辑 |
| 搜索框点击 | 点击输入区域跳转 | 跳转全站搜索页 |
| 更多按钮点击 | 点击更多图标跳转 | 个人中心、设置等 |
样式建议
- 首页顶栏：全宽、圆角 999（胶囊）、浅灰底，与轮播间距 16～24 rpx
- 提示文字简短，点出可搜内容类型
- 更多 入口适合放「扫码」「消息」等高频操作
使用技巧 / 注意事项
- 搜索栏通常为 展示 + 跳转，实际搜索在目标搜索页完成
- 左侧 字体图标 与 图片 二选一，不要同时混用
- 若不需要右侧按钮，可将 按钮文字 留空或设与背景同色（以编辑器实际预览为准）
- 务必配置 搜索框点击，否则用户点击无反应
筛选标签
组件说明： 横向可滚动的标签栏，用于切换「推荐 / 最新 / 视频」等筛选项，并可联动下方列表或切换独立内容区。
适用页面
| 页面类型 | 是否可用 | 说明 |
|---|---|---|
| 应用首页、功能页面 | ✅ | 可联动圈子列表或笔记列表 |
| 自定义页面 | ✅ | 视下方组件而定 |
| 社区圈子 | ✅ | 仅 可与下方 笔记列表 联动 |
| 服务表单 | ❌ |
每页唯一
筛选标签 每页最多 1 个。圈子列表、笔记列表、瀑布流 三选一，详见 页面类型 — 互斥规则。
如何添加
- 左侧 布局导航 → 筛选标签（圈子页画布仅此项与笔记列表可用）
- 在筛选标签 下方 添加 笔记列表 或 圈子列表（首页二选一）
- 配置 下方内容模式、联动标识，并添加各 筛选项
属性配置
结构与联动
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 滑动时吸顶 | 上滑时标签栏固定在导航栏下方 | 开启（默认）；关闭则随页滚动 |
| 下方内容模式 | 切换标签后下方如何变化 | 列表 API 联动 / Tab 独立内容区 |
| 联动目标 | 联动的列表类型（首页） | 圈子列表 / 笔记列表 |
| 联动标识 | 与下方列表组件的配对编号，一致才联动 | default（双方填相同值） |
| 默认选中下标 | 进入页面默认选第几个标签 | 0（第一项） |
两种下方内容模式：
| 模式 | 适用场景 | 行为 |
|---|---|---|
| 列表 API 联动 | 下方只有一个笔记/圈子列表 | 切换标签只改变列表的排序、筛选条件 |
| Tab 独立内容区 | 每个标签下方内容完全不同 | 每个 Tab 可单独编排轮播、宫格、列表等 |
筛选项（每一项）
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 显示文字 | 标签上看到的文案 | 推荐、最新、视频 |
| 取值 | 内部标识，可选 | 留空则用显示文字 |
| 排序字段（圈子） | 联动圈子列表时的排序 | 智能热度、创建时间、人气等 |
| 排序方向（圈子） | 升序 / 降序 | 降序（新/热在前） |
| 圈子分类 | 只显示某分类下的圈子 | 留空=不限；可点 选择 |
| 排序（笔记） | 联动笔记列表时的排序 | 智能热度、最新、点赞、个性化推荐等 |
| 排序方向（笔记） | 升序 / 降序 | 降序 |
| 圈子 | 只显示某圈子下的笔记（首页） | 留空=不限；圈子页无此项 |
| 话题 | 只显示某话题下的笔记 | 留空=不限 |
| 笔记类型 | 普通图文 / 视频 / 语音 | 不筛选 / 0 普通 / 1 视频 / 2 语音 |
| 闲置筛选 / 闲置类型 | 闲置交易相关筛选 | 按需 |
| 排除置顶 | 列表不显示置顶笔记 | 按需 |
| 前置图标 / 前置图片 | 标签左侧小图标 | 图片优先于图标 |
外观
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
| 选中背景 / 选中文字 | 当前标签药丸配色 | 品牌紫 #9C5CFF + 白字 |
| 未选中背景 / 未选中文字 | 未选中标签配色 | 灰底 #F2F2F2 + 深灰字 |
| 显示指示条 | 选中项底部短横条 | 开启 |
| 指示条宽 / 高 / 圆角 / 间距 | 底部指示条细节 | 宽 48、高 6 |
| 字号 / 行高 / 字间距 | 标签文字排版 | 26、行高 1.35 |
| 项间距 | 标签之间的空隙 | 12 |
| 药丸圆角 / 内边距 | 标签胶囊形状 | 圆角 999、左右内边距 28 |
| 滚动区左右内边距 | 整行标签左右留白 | 24 |
圈子页特别说明
在 社区圈子 页面，筛选标签 只能 与下方 笔记列表 联动，不能联动圈子列表。联动目标会自动固定为笔记列表；筛选项中 不会出现「按圈子筛选」（当前已在某一圈子内）。联动标识仍须与笔记列表组件填 相同值。
样式建议
- 吸顶开启时，标签栏背景建议设 纯白或半透明，避免滚动时内容穿透
- 标签数量 4～8 个 为宜，过多靠横向滑动
- 选中态用品牌主色，未选中用浅灰，对比清晰
使用技巧 / 注意事项
- 列表 API 联动：筛选标签与笔记/圈子列表的 联动标识必须一致（默认都是
default） - 首页画布上 圈子列表与笔记列表只能存在一个，请先决定联动哪一种
- Tab 独立内容区：在属性 选项 里点标签名切换当前 Tab，再向画布添加该 Tab 下方组件；手机预览内 Tab 不可点击（避免无法选中组件）
- 个性化推荐 排序需后台开启推荐能力；不可用时会自动降级为智能热度
- 筛选项的排序、分类等仅在 列表 API 联动 且联动目标匹配时生效
- 组件外层宽高、背景、阴影等请在 样式 Tab 配置（与画布其他组件相同）
下一步
继续阅读 信息展示组件 — 列表、通知栏、结束文本。