微信小程序input层级穿透解决

微信小程序里面，由于`input`是原生组件，所以会存在层级穿透的问题，`view`标签无法覆盖在上面，点击的时候，下面的input组件会被聚焦，下面记录一下解决方法

解决方法

1.使用`cover-view`代替`view`（不太推荐）

该方法适合覆盖在上的input标签上的东西样式不太复杂，因为cover-view标签支持的css有缺失，而且cover-view标签在动画切换的时候会最先出现在屏幕中，最迟消失在屏幕中，体验不太好

2.使用`view`代替`input`（推荐）

在input同级创建一个view标签，然后在css中，将2者的样式差别抹平，平时显示view标签，当view标签被点击的时候，通过wx:if切换成input标签，然后获取input的实例，使用input.focus()方法聚焦到input

优点：

可以封装成组件，直接代替input在项目中使用，也方便以后别的项目中复用
对比方法1，对代码的修改少，不用对代码进行大规模的修改

微信小程序input层级穿透解决相关推荐

解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
微信小程序中使用全局变量解决页面的传值问题
微信小程序中使用全局变量解决页面的传值问题由于项目需要,最近便在做一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变 ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...
简单实现微信小程序 input 的双向绑定
简单实现微信小程序 input 的双向绑定 data 中定义表单数据 data:{formData:{} } wxml 中,利用 data- 传递参数到逻辑层 <input bindinput= ...

微信小程序input层级穿透解决

微信小程序里面，由于`input`是原生组件，所以会存在层级穿透的问题，`view`标签无法覆盖在上面，点击的时候，下面的input组件会被聚焦，下面记录一下解决方法

解决方法

1.使用`cover-view`代替`view`（不太推荐）

2.使用`view`代替`input`（推荐）

微信小程序input层级穿透解决相关推荐

最新文章

热门文章

微信小程序input层级穿透解决

微信小程序里面，由于input是原生组件，所以会存在层级穿透的问题，view标签无法覆盖在上面，点击的时候，下面的input组件会被聚焦，下面记录一下解决方法

解决方法

1.使用cover-view代替view（不太推荐）

2.使用view代替input（推荐）

微信小程序input层级穿透解决相关推荐

最新文章

热门文章

微信小程序里面，由于`input`是原生组件，所以会存在层级穿透的问题，`view`标签无法覆盖在上面，点击的时候，下面的input组件会被聚焦，下面记录一下解决方法

1.使用`cover-view`代替`view`（不太推荐）

2.使用`view`代替`input`（推荐）