uni-app h5下面搜索的设置为不可以点击 但还是能点击

uni-app h5下面搜索的设置为不可以点击 但还是能点击

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

产品分类：uniapp/H5

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：2.9.10

浏览器平台：Chrome

浏览器版本：版本 86.0.4240.198（正式版本） （64 位）

操作步骤：

"app-plus": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"placeholder": "糗事搜索",
"placeholderColor": "#ccc",
"disabled": false
}
}
},
"h5": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"disabled": false
}
}
}

预期结果：

"app-plus": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"placeholder": "糗事搜索",
"placeholderColor": "#ccc",
"disabled": false
}
}
},
"h5": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"disabled": false
}
}
}

实际结果：

"app-plus": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"placeholder": "糗事搜索",
"placeholderColor": "#ccc",
"disabled": false
}
}
},
"h5": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"disabled": false
}
}
}

bug描述：

在h5下面搜索设置为不可以点击，但是还是可以点击，不单独设置h5的时候官网说的是按照app的设置，但是两种方法都没有起到作用，还是可以点击

"app-plus": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"placeholder": "糗事搜索",
"placeholderColor": "#ccc",
"disabled": false
}
}
},
"h5": {
"titleNView": {
"searchInput": {
"align": "center",
"borderRadius": "4px",
"backgroundColor": "#f00",
"disabled": false
}
}
}

更多关于uni-app h5下面搜索的设置为不可以点击 但还是能点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看文档不仔细，设置为true才是不可以点击！！

更多关于uni-app h5下面搜索的设置为不可以点击 但还是能点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html


详情查看

根据你的描述，问题在于H5环境下searchInput的disabled属性设置无效。这是一个已知的uni-app H5端的限制。

在H5平台，titleNView的searchInput组件确实不支持disabled属性。这个属性在APP端有效，但在H5端会被忽略。这是由H5端的实现方式决定的，因为H5的导航栏是通过DOM模拟实现的，而不是原生组件。

目前的解决方案是：

  1. 对于H5平台，需要通过CSS来禁用点击效果：
.uni-page-head-search-input {
  pointer-events: none;
}
  1. 或者通过动态判断平台来显示不同的UI：
if(uni.getSystemInfoSync().platform === 'h5') {
  // 使用自定义搜索框代替titleNView
}
回到顶部