主页 / 网络编程 /

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

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化来一起学习学习吧

前言

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


<view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</view>

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

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

<cover-view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</cover-view>

效果如下，动手试试吧！

到此就解决了遮盖问题

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

上一篇：微信小程序textarea层级过高(盖住其他元素)问题的 下一篇：使用ESLint禁止项目导入特定模块的方法步骤

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by