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

前言 由于小程序中的textarea组件是原生组件，而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，造成输入的文字会显示在小程序其他组件上，如下图所示： <view class='bar bottomfix shadow justify-center'> &lt;button class='' formType=submit type=primary style='font-size:12pt;border:0px;width:300px;'&gt; 保 存&lt;/button&gt; </view> 网上有一些绕弯路的解决办法，其实小程序有一个直 在微信小程序开发中，开发者经常会遇到一个问题：当使用textarea组件时，由于textarea是原生组件，它的层级（z-index）默认是最高的，这会导致它覆盖掉页面上的其他组件，即使尝试调整其他组件的z-index也无法解决。这种情况在设计上有碍用户体验，比如在textarea下方设置的保存按钮可能被输入的文字遮挡，影响用户操作。 为了解决这一问题，微信小程序提供了一种直接的方法，即使用`cover-view`组件。`cover-view`是专为了解决原生组件层级过高而设计的，它可以覆盖在原生组件之上，包括textarea。与一般的原生组件不同，`cover-view`和与其类似的`cover-image`组件允许开发者在原生组件之上添加交互元素，如按钮、文字等。 在代码示例中，我们可以看到原始的保存按钮被包含在`<view>`标签内，导致它被textarea覆盖。要解决这个问题，只需要将`<view>`替换为`<cover-view>`，如下所示： ```html <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> ``` 这样，保存按钮就能正确地覆盖在textarea之上，确保用户在输入时仍能清晰看到并点击按钮。 需要注意的是，`cover-view`和`cover-image`组件有一些特定的使用限制，例如它们只能嵌套在`<scroll-view>`、`<map>`、`<video>`、`<canvas>`、`<ad>`或其它`cover-view`/`cover-image`组件中，且不能包含`<input>`、`<textarea>`等组件。此外，这些组件的样式计算与普通Webview组件不同，需要特别留意。 通过这个简单的技巧，我们不仅解决了textarea遮挡其他组件的问题，还确保了界面的正常交互。在实际开发中，理解并合理运用这些特性能够帮助我们构建更优的用户体验。希望这个解决方案对你的微信小程序开发有所帮助，如果你在实践中遇到更多问题，欢迎继续探讨和学习。