uni-app 原生导航栏搜索框 onNavigationBarSearchInputClicked无效

uni-app 原生导航栏搜索框 onNavigationBarSearchInputClicked无效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：小米9

页面类型：nvue

打包方式：云端

示例代码：

"searchInput":{  
    "autoFocus":"true",  
    "align":"left",  
    "backgroundColor":"#F7F7F7",  
    "borderRadius":"4px",  
    "disabled":false,  
    "placeholder":"智能积木 越野四驱车",  
    "placeholderColor":"#CCCCCC"  
},  

onNavigationBarSearchInputClicked(){  
    console.log('点击了原生搜索框')  
},

操作步骤：

"searchInput":{  
    "autoFocus":"true",  
    "align":"left",  
    "backgroundColor":"#F7F7F7",  
    "borderRadius":"4px",  
    "disabled":false,  
    "placeholder":"智能积木 越野四驱车",  
    "placeholderColor":"#CCCCCC"  
},  

onNavigationBarSearchInputClicked(){  
    console.log('点击了原生搜索框')  
},

预期结果：

点击原生搜索栏会触发

实际结果：

实际这个生命周期不管用 没有输出 console.log('点击了原生搜索框')

bug描述：

使用onNavigationBarSearchInputClicked该生命周期不管用啊， 是官方Bug吗


更多关于uni-app 原生导航栏搜索框 onNavigationBarSearchInputClicked无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

vue页面我测试了貌似也不触发

更多关于uni-app 原生导航栏搜索框 onNavigationBarSearchInputClicked无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好像只有page里设置成禁止输入 disabled:true 才会能触发点击事件 是这样子的吗

根据你提供的信息，这个问题确实存在。在uni-app中，onNavigationBarSearchInputClicked生命周期在nvue页面中可能无法正常触发，这是一个已知的问题。

对于原生导航栏搜索框的点击事件，建议改用以下替代方案：

  1. 使用onNavigationBarButtonTap事件来监听搜索按钮点击：
onNavigationBarButtonTap(e) {
    if(e.index === 0) {  // 0表示第一个按钮
        console.log('点击了搜索按钮');
    }
}
  1. 或者考虑使用自定义导航栏替代原生导航栏，这样可以获得更灵活的控制：
"navigationStyle": "custom"
回到顶部