一步快速解决微信小程序中textarea层级太高遮挡其他组件

前言

由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示:

一步快速解决微信小程序中textarea层级太高遮挡其他组件_第1张图片





网上有一些绕弯路的解决办法,其实小程序有一个直接解决原生组件覆盖问题的办法,就是使用cover-view,小程序为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。

上方覆盖部分改为如下即可:





效果如下,动手试试吧!

一步快速解决微信小程序中textarea层级太高遮挡其他组件_第2张图片

到此就解决了遮盖问题

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

你可能感兴趣的:(一步快速解决微信小程序中textarea层级太高遮挡其他组件)