uni-app H5搜索框出现两个清除图标

uni-app H5搜索框出现两个清除图标

操作步骤：

  • 无

预期结果：

  • 一个清除图标

实际结果：

  • 无

bug描述：

  • pages.json中配置searchInput后，搜索框右侧出现两个清除图标。

ac88d94612c08f24724bfd98b087ad05

相关链接：


更多关于uni-app H5搜索框出现两个清除图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢您的反馈，此问题 HBuilderX alpha 3.2.5+ 已修复 相关帖子：https://ask.dcloud.net.cn/question/129225

更多关于uni-app H5搜索框出现两个清除图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 pages.json 中配置 searchInput 时，搜索框右侧出现两个清除图标，这通常是由于 原生导航栏的搜索框 与 页面内自定义的搜索组件 样式叠加导致的。

主要原因：

  1. pages.json 中配置的 searchInput 会生成原生导航栏的搜索框，它自带一个清除图标。
  2. 页面内可能同时使用了类似 uni-search-bar 的自定义组件，该组件也包含清除图标。
  3. 两者同时存在时，视觉上会显示两个清除图标。

解决方案：

  • 方案一（推荐）：统一使用一种搜索框

    • 如果使用原生导航栏搜索框，就移除页面内的 uni-search-bar 组件。
    • 如果使用页面内的 uni-search-bar 组件，就在 pages.json 中移除 searchInput 配置。

  • 方案二：调整样式覆盖

    • 如果仍需保留两者，可通过 CSS 隐藏其中一个清除图标。例如，隐藏原生搜索框的清除图标：
      /* 在 App.vue 或对应页面的样式 */
::v-deep .uni-searchbar__clear {
  display: none !important;
}
回到顶部