微信小程序文本区级别过高问题解决方案(覆盖其他元素)

前言：这篇文章是关于什么的

如何解决微信小程序中textarea组件的高级问题

前言：这篇文章对谁有用

微信小程序开发者

这篇文章有什么用？

提供解决问题的思路供大家参考

(因为时间关系，我没办法把代码整理好粘贴好给你复制粘贴。或者将其做成组件和开源)

前言：本文的时效性

截至2018年10月30日，微信的textarea还是以原生组件的形式实现，所以级别最高。不能用z指数来调整。在微信小程序正式将textarea改为可控级别之前。本文内容永远有效。

1.问题描述

根据官方文件，textarea是原生组件(https://developers . weixin . QQ.com/mini program/dev/component/textarea . html)，所谓的原生组件是“脱离WebView渲染过程”

文件中的准确措辞是：

本机组件具有最高级别，因此无论设置什么z-index，页面中的其他组件都不能覆盖在本机组件上。

导致的问题：

在可滚动的页面中。textarea中的文本覆盖在位置：的元素上

经典业务场景1:

页面底部有一个固定的操作栏，如“添加到购物车”。'立即购买'，显示价格等。

经典业务场景2:

页面中有一个弹出窗口

问题截图

让我们先在页面上放两个文本区

目前看来一切正常。

让我们在下面的文本区输入一些单词。

然后向上滚动页面。您可以看到文本覆盖了底部的动作栏

即使我们不输入任何单词，占位符也会直接覆盖操作栏

注意：请在真机上测试。我们在微信开发者工具中看不到这样的问题。

如何解决业务场景1(滚动)？

Textarea仅在输入时使用，text在不输入时使用。当内容为空时，占位符用视图实现。总共有三个要素

视图负责显示占位符/视图文本区域负责输入文本/文本区域视图文本负责显示文本(使用文本确保正常换行)/文本/视图当输入为空时，显示占位符。

当输入不为空时，是显示textarea还是负责显示文本的视图，取决于目前是否有焦点。

如何解决业务场景2(弹出窗口)？

出现弹出窗口时，用wx:if隐藏文本区域

本文结束

感觉：这个破东西花了我差不多一个下午的时间。同时，它根本没有提升我的技术，只是满足了我的业务需求。

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。