热门标签
当前位置: article > 正文
微信小程序input层级穿透解决_小程序 input覆盖view
作者：笔触狂放9 | 2024-02-16 13:39:48
赞
踩
小程序 input覆盖view
微信小程序里面，由于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，对代码的修改少，不用对代码进行大规模的修改
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/93833
推荐阅读
相关标签
