解决uniapp里的onNavigationBarSearchInputClicked不生效

如何在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;  
}
相关推荐
裕晟资质规划3 小时前
三类涉密资质延续时限差异分析:军工60日与集成印制3个月的边界
java·服务器·前端·网络·安全
ShineWinsu4 小时前
对于JavaScript:JavaScript基础语法的解析
开发语言·前端·javascript·面试·web·基础语法·循环
月夏4 小时前
Vue3 转 React:18 项对照表 + 5 个必踩的坑(附 7 天上手路线)
前端
广州华水科技4 小时前
单北斗GNSS位移监测系统的应用与维护解析
前端
梦曦i4 小时前
uni-storage 0.1.0 发布:TTL过期管理+多实例隔离
前端·storage·uni-app x
猫头_5 小时前
AI 流式传输工程指南:模型吐出半截 JSON,前端如何边收边渲染?
前端·javascript·llm
console.log('npc')6 小时前
第 1 章 项目概述与环境搭建
前端·人工智能·大模型
定栓6 小时前
Webpack迁到Vite第七节(二):全家桶移除 — Babel 全家桶深度分析
前端·webpack·node.js
IT_陈寒6 小时前
React组件莫名重渲染?你可能忘了这个小细节
前端·人工智能·后端
鶴哥只手遮天6 小时前
React 19.3.1 源码深度剖析-第 12 章(下)RSC 与 Flight 协议
前端·react.js·开源