小程序 text decode 真机无效_小程序 textarea 穿透问题

这是一个经常会遇到的问题，例如，小程序 form 表单提交信息页面。只要包含 textarea 组件，并且底部有固定的按钮，一定会遇到这个问题。虽然不影响功能，但是还是影响体验。问题截图：

可以看到，textarea 中的文字，显示在了按钮上方。看上去就好像按钮是透明的一样。实际会有两个问题：

不填写 textarea 文字时，cell 的边框线，会穿透 button，即，可见
填写 textarea 之后，文字会穿透 button

问题影响范围

真机 ios, android 和开发工具都会受到影响。

出现穿透的原因

textarea 是原生组件。

原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

详见微信小程序官方文档：

解决方法

使用 cover-view 替换 view 来解决。

原代码：

.bottom_btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
}

<view class="bottom_btn">
    <button class="primary" style="width: 95%;">立即报名</button>
</view>

修改之后的代码：

.bottom_btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	z-index: 999;
}

<cover-view class="bottom_btn">
    <button class="primary" style="width: 95%;">立即报名</button>
</cover-view>

修改后的效果：