搜索框组件

搜索框组件用于在微页面中提供商品搜索入口，可以直接输入搜索内容，也可以作为固定跳转入口使用。

使用方式

• 允许输入：用户可以直接输入关键词并执行搜索；
• 关闭输入：整个搜索框作为入口，点击后执行配置的页面跳转；
• 普通展示：随页面内容滚动；
• 吸顶展示：滚动到指定位置后固定在页面顶部。

添加组件

1. 在页面编辑器中拖入【搜索框】组件；
2. 设置左侧显示标题、Logo 或不显示内容；
3. 填写提示内容并设置文本对齐；
4. 选择是否允许输入、显示边框和搜索按钮；
5. 配置按钮文字及点击动作；
6. 按需设置吸顶和小程序胶囊位；
7. 保存后在目标端预览并测试搜索。

主要配置

配置项	说明
左侧内容	显示标题、Logo 或不显示
提示内容	搜索框未输入内容时显示的提示文字
允许输入	开启后可在当前组件内输入；关闭后按配置动作跳转
搜索按钮	控制按钮显示，并可自定义按钮文字
点击动作	通常指向商城搜索页面
吸顶设置	设置是否吸顶、固定位置、顶部偏移以及吸顶后的背景和色调
胶囊位设置	在小程序端为系统胶囊按钮预留空间
样式	调整高度、圆角、边框和各部分配色

吸顶配置

固定位置	适用情况
内容顶部	页面显示导航栏时，固定在导航栏下方
顶部导航区域	自定义沉浸式顶部中使用，与小程序胶囊所在区域对齐

【顶部偏移】用于在系统计算位置的基础上增加额外距离，通常保持 0。开启【吸顶后样式】后，可以单独设置吸顶背景、底部阴影和搜索框色调。

使用建议

• 提示文字应简短明确，不要承诺一定能搜到某类商品；
• 关闭【允许输入】时，确认点击动作已经配置；
• 开启吸顶后，检查是否遮挡页面标题或顶部导航；
• 小程序通常使用【自动避让】，H5 不会保留胶囊空间；
• 深色背景下应调整输入区域和提示文字配色，保证可读性。

常见问题

搜索框被返回按钮或小程序胶囊遮挡

开启【胶囊避让 → 自动避让】，并在实际页面而非只在编辑器中检查。独立搜索组件显示在普通导航栏下方时，吸顶位置优先选择【内容顶部】。

吸顶后文字看不清

开启【吸顶后样式】，为吸顶区域设置不透明背景，并为提示文字、输入背景和按钮配置足够对比度。

用户搜索记录可在搜索日志中查看，常用引导词可在热搜词中维护。