微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡

场景描述

用户点击某选项，弹出一个表单弹窗，弹窗中有使用textarea组件，当用户点击输出框输入时，键盘遮挡到textarea组件原本的文字，textarea组件悬浮到键盘上方并遮挡其他内容

BUG复现

这是一个代码片段

预期输入时效果

BUG表现

解决方案

1 修改弹窗定位方式

将弹窗的fixed定位改为absolute定位，可解决此问题

局限性:absolute定位方式必须依赖上级的relative定位元素，可能导致布局问题；

2 修改文档流布局

当page中文档流已滚动到页底，或page文档流高度不超过page时，不会出现此问题；

所以可以通过使用scroll-view将文档流内容包裹起来，让page的内容不超出page，就不会出现这个问题

局限性:使用scroll-view组件，就无法触发page的onReachBottom事件，要改为监听scroll-view的滚动事件实现上拉加载

或者在弹窗弹出时，手动将page滚动到底部，也可解决

局限性：滚动页面体验不佳

3 属性fixed=true

查阅文档发现，textarea组件有一个属性fixed
附上文档链接

原来只要设置这个属性就可以了；问题解决；perfect

总结

textarea是原生组件，有颇多局限性，使用原生组件时有很多限制，而且有很多诸如此类的bug，要多多注意；使用组件时多看文档，毕竟小程序的组件与html的标签差距颇大