解决uniapp里的onNavigationBarSearchInputClicked不生效

哇，女前端哎！2024-06-02 12:01

如何在uniapp里使用onNavigationBarSearchInputClicked。

1、在page.json里配置

javascript 复制代码

"pages": [{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",
		"navigationStyle": "custom",
		"app-plus": {
			"titleNView": {
				"type": "transparent",
				"searchInput": {
					"backgroundColor": "#eee",
					"borderRadius": "16px",
					"placeholder": "请输入关键词",
					"disabled": true, //onNavigationBarSearchInputClicked使用这个方法必须设置为true
					"placeholderColor": "#606266"
				},
			}
		}
	}
}]

2、在页面中使用

javascript 复制代码

// 监听页面加载
onLoad(){
},
// 监听原生标题栏搜索输入框点击事件
onNavigationBarSearchInputClicked(){
}

有的浏览器支持，但是有的浏览器不生效，原因是浏览器设置 disabled 的 input 元素不支持点击事件。

解决方案：需要在App.vue里的style添加样式

javascript 复制代码

.uni-input-input:disabled {  
     pointer-events: none;  
}