综合头部组件
综合头部是页面顶部的复合组件，可以统一组合搜索栏、导航选项卡、轮播图和氛围背景。每个页面最多添加一个，编辑器会将其排列在页面顶部。
适用场景
- 首页需要沉浸式搜索、导航和轮播组合；
- 希望搜索栏滚动后吸顶，并在小程序端自动避让胶囊；
- 希望顶部背景跟随轮播图形成模糊氛围效果。
添加组件
- 在页面编辑器中拖入【综合头部】组件；
- 配置搜索栏模块；
- 按需启用选项卡和轮播图模块；
- 分别维护各模块内容和点击动作；
- 按需开启【轮播氛围背景】并选择强度；
- 配置搜索栏吸顶位置和吸顶后样式；
- 保存后在实际终端预览滚动效果。
模块说明
| 模块 | 说明 |
|---|---|
| 搜索栏 | 可设置提示内容、搜索按钮、点击动作、吸顶样式和胶囊避让 |
| 选项卡 | 可选模块，用于展示一组导航入口 |
| 轮播图 | 可选模块，用于展示图片和活动入口 |
氛围背景
开启后，综合头部会使用当前轮播图片生成模糊背景，并随轮播切换。该能力只属于综合头部，不会修改页面全局背景。
- 必须先启用轮播图模块；
- 【柔和】适合浅色页面，【标准】适合大多数首页，【浓郁】适合强调主视觉；
- 搜索栏和选项卡文字需要与背景保持足够对比度；
- 页面背景色应与头部底部区域协调，减少视觉割裂。
搜索栏吸顶
默认搜索栏固定到【顶部导航区域】，适合沉浸式自定义顶部，并会在微信小程序中与胶囊区域对齐。吸顶后默认切换为不透明背景、深色搜索框和底部阴影。
如果页面使用标准导航栏，或不希望搜索栏进入顶部导航区域，可将固定位置改为【内容顶部】。
使用建议
- 页面已有综合头部时，不要重复添加用途相同的搜索栏或轮播图；
- 开启吸顶后，检查是否遮挡系统导航和小程序胶囊；
- 整体背景与各模块文字保持足够对比度；
- 关闭可选模块后，检查顶部高度和留白；
- 发布前测试搜索、导航、轮播和滚动状态。
常见问题
为什么不能开启氛围背景？
氛围背景依赖轮播图片，请先启用轮播图模块并配置图片。
搜索栏初始化时就显示吸顶样式
请确认页面有足够的顶部内容和滚动距离，并在真实 H5 或小程序页面中验证。吸顶视觉只应在组件真正进入固定状态后生效。
小程序状态栏区域颜色没有随吸顶变化
确认搜索栏启用了【吸顶后样式】，并使用【顶部导航区域】作为固定位置。该模式会统一处理顶部覆盖区域。