uni-search-bar 的取消按钮由 cancelButton 属性控制,仅当值为字符串"y"时显示;设为"n"才隐藏,布尔值或非字符串值均会被当作"y"处理。

uni-search-bar 组件的取消按钮不是“默认自带”或“系统强制显示”的,它完全由 cancelButton 属性控制。只要没显式设为 "y"(或 true),就不会出现。
确认你用的是 uni-search-bar 而不是原生 input
很多开发者误以为顶部那个输入框是“uni-app 自带搜索栏”,其实它只是你主动引入的 。先全局搜索项目:
cancelButton 属性值必须是字符串 "y" 或 "n"
官方文档明确要求该属性只接受字符串,不是布尔值。传 false、null、undefined 或数字 0 都会被当作默认值 "y" 处理,结果就是取消按钮照常显示。
- ✅ 正确写法:
cancelButton="n" - ❌ 错误写法:
:cancelButton="false"、cancelButton=false、cancelButton="false" - ⚠️ 注意:即使写了
v-if="showSearch"控制显隐,只要组件被挂载过,焦点逻辑可能残留;建议直接删掉属性或设为"n"
隐藏后仍能看到按钮?检查是否被样式覆盖
有些项目在 uni-search-bar 外层套了自定义容器,或通过 CSS 强制显示了子元素。取消按钮 DOM 类名通常是 .uni-searchbar-cancel,如果它还在页面上可见,大概率是:
- 父组件用了
!important强制显示该元素 - 你手动写了
.uni-searchbar-cancel { display: block !important; } - 使用了旧版
uni-ui(如1.3.5以前),存在 cancel 按钮未响应cancelButton="n"的 bug
验证方式:打开浏览器开发者工具,定位到该按钮元素,看 computed styles 里 display 是否被覆盖;临时删掉项目里所有含 uni-searchbar-cancel 的 CSS 规则再试。
H5 端不要依赖 titleNView.searchInput
虽然这个问题不直接相关,但很多人改着改着就误配了 pages.json 里的 titleNView.searchInput。要再次强调:titleNView.searchInput 在 H5 完全无效,旧版 HBuilderX(3.98 以下)会错误渲染一个无法聚焦、样式错乱的输入框,且它没有取消按钮——但它的存在会让你误判问题来源。务必检查并删掉所有类似配置:
{"app-plus": {"titleNView": {"searchInput": {"placeholder":"搜索"}}}}
真正需要搜索功能时,只用 放在页面 内部,别试图从导航栏“注入”。
最容易被忽略的是属性类型:字符串 "n" 和布尔 false 在 Vue 模板中行为完全不同,而 uni-ui 的 props 校验又不报错,导致按钮“删不掉”却找不到原因。











