级联容器

级联容器用于在楼层背景上做出多级 Tab / 分类切换效果：

访客点击某一档「指示图」后，展示对应的一整块内容（可含图片、热区、产品区、甚至下一级级联菜单）。

适合产品分类导航、系列切换、多 Tab 介绍区等，比单纯叠多个热区更易维护整块切换内容。

从左侧 「容器」 拖入 「级联容器」，放在「图片背景容器」内并对齐设计区域后，通过 「添加子容器」 逐档配置；每一档需设置 指示图 并 编辑子容器 填写该档展开后的内容。

组件能做什么

• 多档切换：一个级联容器下可添加多个「子容器」，每档对应一张指示图 + 一块独立内容。
• 指示图 + 内容分离：指示图是访客看到的 Tab/按钮图；内容在子容器里单独编辑，点击后由旺铺页面逻辑切换显示。
• 支持多级嵌套：某一档的内容里可再放「级联容器」，做出二级、三级菜单（如大类 → 小类 → 详情区）。
• 弹窗式子页面编辑：每档内容在 「编辑子容器」 弹窗里装修，与主页面编辑器能力一致（热区、图片链接、其它容器组件等）。
• 整层对齐：拖入背景容器后会自动贴合父容器宽高，便于铺满设计稿上的交互区域。

结构说明

选中 级联容器 后，其下会有若干 级联子容器（子容器 1、子容器 2……）。每个子容器内固定包含两部分：

设置项说明（级联容器）

设置项说明（级联子容器 / 每一档）

指示器图片（每一档的 Tab 图）

选中子容器下的 「指示器图片」，按 图片热区 组件方式设置：

位置与大小

• 级联容器：拖入「图片背景容器」后会尝试自动与父容器同宽同高；可在样式中调整 左、上、宽、高，或拖动外框对齐设计区域。
• 指示器图片：每一档单独拖动、对齐，勿与其它档指示图重叠。
• 子容器内容：在「编辑子容器」弹窗内按子页面坐标摆放组件，尺寸以弹窗画布为准。

常见用法

产品分类 Tab 条

背景切图已画好分类条，级联容器铺满该区域；每档指示图对应一个分类名切图，子容器内放该分类的产品图、文案或热区。

系列 / 场景切换

如「家用」「商用」「工业」等系列，点击不同指示图切换下方大块展示内容，避免做多个重复楼层。

二级、三级菜单

第一级级联容器做一级 Tab；某一档的子容器内再拖入 级联容器，做二级选项；需要时可在二级内容里继续嵌套第三级（适合复杂分类页）。

注意事项

• 必须放在图片背景容器内：与楼层切图坐标体系一致，且便于对齐背景。
• 先加子容器再编辑内容：每新增一档后，先设好指示图位置与图片，再点 「编辑子容器」 填内容，避免漏档。
• 子容器弹窗里记得保存：弹窗内编辑完成后需点保存，关闭后主页面才会带上该档内容。
• 指示图要对准切图：线上切换依赖指示图位置与旺铺脚本，偏移会导致点不中或档口错乱。
• 「可点击」慎关：仅展示、不需要访客切换的档可关闭；主 Tab 档请保持开启。
• 不宜代替整层背景：整层静态大图仍用「图片背景容器」；级联只负责该区域内的交互切换。
• 预览必做：多级嵌套时请在旺铺预览逐档点击，确认切换内容与指示图一致。

推荐操作顺序

1. 在「图片背景容器」内拖入「级联容器」，调整宽高覆盖交互区域；
2. 在属性面板点击 「添加子容器」，按 Tab 数量重复添加；
3. 逐档选中 指示器图片，设置图片地址并拖到切图对应位置；
4. 对每一档点击 「编辑子容器」，在弹窗内装修该档内容并保存；
5. 若需二级菜单，在某档子容器内容中再拖入「级联容器」并重复上述步骤；
6. 保存页面，在旺铺预览中逐档点击测试后发布。

如有疑问，可结合「图片背景容器」「图片链接」「热区组件」文档一起查看。