微信小程序textarea层级高各种穿透modal和tabBar的解决方法

微信小程序

textarea是navite组件，就是所谓的系统原生组件。什么是系统原生组件？就是系统内核直接提供的组件。系统组件的层级会比普通的组件层级高
无论你怎么设置z-index属性，都无法覆盖原生组件，除非这个原生组件已经支持同层级别渲染了。
目前textarea组件还是无法「同层渲染」所以textarea会带来各种「穿透」问题
比如你写了一个z-index的最高级别的modal，一个蒙版。如果蒙版下面有一个textarea组件，里面有值，那么你在真机上显示这个蒙版时，你预期的效果是蒙版完整的覆盖所有内容，事实上你会发现textare无敌穿透了这个蒙版显示给用户看了
同样的情况会发生在自定义tabBar和navigateBar上面，这样textarea一穿透出来就会非常影响整个页面的效果。
如果解决这个问题？
目前有几个思路：
1、不用textarea组件，改用其他的支持同层渲染的组件代替
2、根据实际情况，在可能会出现穿透情况时实时隐藏textarea，比如wxml里面使用wx:if="{{showTextArea}}"这样的判断来隐藏textarea
比如要showModal之前，咱们先把textarea组件先隐藏起来，设置showTextArea为false,modal执行完相关逻辑后再设置showTextArea为true.
3、其他方法，也是根据1，2延伸出来的方法。

神经蛙2020

感谢分享。