热区组件

热区组件用于在一张图片上配置多个可点击区域，每个区域可以设置独立跳转目标，适合商品海报、活动会场图和楼层导航图。

何时使用

当一张完整设计图中包含多个入口，且无法拆成独立图片组件时使用热区。内容经常变化或需要动态数据时，不建议使用热区。

添加组件

1. 在页面编辑器中拖入【热区】组件；
2. 上传一张完整图片；
3. 在图片上新增并拖动热区；
4. 调整热区位置和大小；
5. 为每个热区配置链接；
6. 保存后在手机预览中逐个测试。

主要配置

配置项	说明
选择图片	作为热区定位基准的完整底图
热区数据	保存每个区域的位置、大小和链接
图片圆角	设置底图显示圆角
区块样式	设置组件外边距、内边距和背景

热区在编辑器中会显示辅助边框，用户端仅响应点击，不显示编辑辅助层。

配置方法

1. 先上传最终使用的完整底图；
2. 在热区编辑器中新建区域；
3. 拖动并缩放区域，使其覆盖目标图形；
4. 为区域选择跳转页面；
5. 依次配置其他区域，避免相互重叠；
6. 在手机预览中逐个点击验证。

使用建议

• 热区应完整覆盖目标图形，并保留足够点击面积；
• 相邻热区之间保留间距，降低误触概率；
• 更换底图尺寸或裁切方式后，重新检查所有热区位置；
• 不要让多个热区重叠，否则点击目标可能不明确；
• 发布前分别在不同屏幕尺寸上测试每个链接。

如果海报内容经常调整，建议拆分为图片、商品列表和按钮等独立组件，避免每次换图后重新定位全部热区。

常见问题

更换图片后热区位置错乱

热区位置以底图为定位基准。更换尺寸或比例不同的图片后，应删除或重新调整全部热区。

用户端看不到热区边框

这是正常现象。边框仅用于编辑定位，正式页面不会显示辅助区域。