一、原生组件textarea的坑

最近在写博客管理端小程序的时候，被textarea穿透效果的问题折磨了好久，并且由于微信开发者工具是用web元素模拟的原生组件，所以该问题一般在模拟器中不会发生，只有在真机中才会体现出来。所以在使用原生组件的时候，一定要在真机上实际调试，并且能不用原生组件最好别用。

下面第一张图是真机效果，可以看到的是textarea已经滚动到顶部导航栏上面了，第二张是模拟器效果，textarea被顶部导航栏正常覆盖。

真机穿透模拟器效果

二、解决方法

2.1 cover-view容器

官方提供了cover-view容器来提供覆盖到原生组件上的支持，但是实际测试会导致其他样式问题，并且会影响已经设计好的顶部导航栏和底部工具栏，估放弃该方案。

对于使用大量原生组件的场景，可以在设计界面的时候就整体上选用cover-view容器。

2.2 隐藏textarea

在网上也查到了隐藏textarea的方法，该方案是解决弹出层被textare穿透的问题，但是我这边除了遮罩层穿透问题，还有就是滚动的时候会穿透顶部导航，同时因为界面上textarea占据了大面积，隐藏的话交互有点不太友好，所以也放弃了该方案

2.3 使用替换元素

这个也是在网上找到的方案，这个方案的思路是使用一个和textarea样式相同的view视图模拟textare的展示效果，输入的时候使用textare，展示的时候使用该view，这样在滚动的时候就不会出现穿透顶部导航栏的问题。

在微信开放社区的一个提问中，还发现了一位兄台已经做了一个自定义组件，就是利用了该方案的原理，该组件的git地址: https://github.com/prianyu/textarea

不过替换元素的方案还是存在一些小问题，比如实际输入的时候还是原生的textarea组件，照样会穿透顶部导航栏。

三、想法--完全自定义组件

因为本身我是一个后端码农，对前端不是太专业，所以找到网上的方案解决了我的问题后，便没有再深入研究这个事情。

不过针对网上找到的各种方案，都有其弊端，有一个想法就是，参考web元素textarea的实现原理，自定义一个textarea组件，使用微信小程序本身的机制去处理光标、输入等，这样一个完全自定义的textarea组件，而非使用替换元素的自定义组件，应该能根本上解决textarea穿透的问题（都不是原生组件了，当然就不存在穿透的问题啦）