小程序textarea踩过的坑（一）

开发小程序快两年了，要说踩过的坑，最让我头疼的就是textarea组件，没有之一。接下来总结一些在这个组件踩过的坑已经解决的方法，希望能对有遇到同样问题的朋友有所帮助。

<一>.自定义的导航栏头部和固定的底部栏，页面中使用了textarea组件后，上下滑动页面，导航栏和底部栏遮挡不住textarea组件的提示文字。如图：

 

 

 

解决办法：

1.要把view标签换成cover-view.

 

2.还要调整wxml界面的层级渲染顺序，把头部和底部栏都放在textarea组件的后面才可以

这样上下滑动界面时候，就不会存在这个问题了。

 

<二>.微信小程序自定义头部后，软键盘弹起时页面整体上移。（也就是自定义头部就会被顶飞）

 

解决：阻止键盘弹起时，自动上推页面。输入框获取焦点的时候让页面绝对定位，相对底部 320像素。失去焦点的时候清空相对底部的距离。

wxml:

页面整体的内容要设置一个相对位置，以及相对bottom距离。input_bottom.

textarea上面阻止键盘自动弹起：ajust-position.(不懂的可以看小程序官方文档)，并设置获取焦点和失去焦点的方法。

js:(相对于底部的距离，input_bottom：xx;可以根据具体布局情况来调整。)