收藏
评论

textarea使用出现的问题说明和解决办法

textarea是官方的原生组件,该组件的使用存在着非常多的问题,详细说明请看下图。


就我目前使用该组件一共出现过三个问题。

第一,textarea嵌套在scroll-view中进行滚动时会出现非常严重的问题,首先是滚动的效果非常差,需要小程序很长的时间才会有反应。该问题在低端机或者老旧机型上展现尤其明显,推测是因为小程序渲染负担或计算量过大导致的;然后这个问题就会导致另外一个问题:小程序渲染负担或计算量过大导致小程序使用的手机资源超过了限制,这个时候就会触发小程序的回收机制。这个时候具体的表现就是小程序“闪退”。针对这个问题,本人通过一系列的测试最后确定了textarea与scroll-view这两个组件产生了冲突导致的,所以本人建议textarea与scroll-view最好不要嵌套使用。同时推荐wxml的自动滚动功能,该功能不需要在wxss或wxml特别说明某个组件或者页面滚动,只要所有组件加起来的高度超过页面高度即可触发滚动。

第二,在使用textarea的页面,各组件的总高度超过页面高度100%的时候,最好不要在wxss写“height: 100%;overflow: hidden;”。

这是因为textarea的展示层级是所有组件中最高的,同时如果组件总高度超过页面高度时可触发滚动,这时就会出现文字漂移的现象了。目前我查看了网上关于这个问题的很多解决办法,基本原理大致都是view和textarea的相互切换,或者在使用textarea时跳转到其他页面进行输入。而前者我尝试了两位大佬的解决方案,就我个人使用而言我觉得这种思路下的解决方案使用体验度非常差,编辑富文本是需要双击view切换textarea,而textarea切换view的速度也不稳定,有可能在切换的途中页面滚动了,这个时候还是会出现文字漂移的问题。至于后者也不用试了,一看也是体验度比较差的解决方案。本人对于该问题也没有完美的解决方案,不过确实有方法可以避开文字漂移问题。具体方式就是一开始说的,不要在wxss的pages中加入height: 100%;overflow: hidden;

第三,textarea的展示层级是所有组件中最高的这个现象还有引发另外一个问题,那就是页面中同时存在textarea和弹窗。那么出现弹窗时textarea的内容就会透过弹窗展示出来。而这个问题只需要在出现弹窗时使用hidden隐藏textarea组件即可。


扫码体验

赞 1
收藏
登录 后发表内容