微信小程序监听键盘变化改变textarea位置
目录
微信小程序监听键盘变化改变textarea位置
需求：做一个能够点击评论后自动弹起键盘并且在键盘上有一个textarea的输入框
思路：先将textarea隐藏起来，当点击评论后显示，这个时候，利用微信textarea的属性auto-focus自动聚焦，拉起键盘。然后将定位textarea的bottom修改为键盘高度,收起时监听键盘的高度，当高度等于0时，将textarea隐藏
注意：小程序中textarea的bindkeyboardheightchange属性能够监听到键盘的高度，当键盘高度发生变化的时候触发事件，在ios系统中能够正常使用，但是在部分安卓手机中出现bug，点击键盘外空白出，键盘收起，但是事件并没有触发，后来发现用api能够解决这个问题，但是也要注意，这两个都会在键盘升起或者收下时调用多次，后来发现弹起时第一次的数据是错误的，在ios中是0，在安卓不是0不是键盘高度，高度要比键盘高度小一些，所以需要将第一次监听到的高度去掉
部分代码
onShow: function() {
wx.onKeyboardHeightChange(res => { //监听键盘高度变化
this.keyBoardChange(res.height)
})
}， comment() {
this.setData({
showTextara: true,//将textarea显示，聚焦自动拉起键盘，此时触发了onKeyboardHeightChange
})keyBoardChange(height) {
//键盘高度改变时调用
if (this.data.first) { //弹起时第一次的数据是错误的，所以不需要修改keyBoardHeight
this.setData({
first: false //将first改为false表示不是第一次调用
})
} else {
let keyBoardHeight = height + 'px'
this.setData({
keyBoardHeight //将键盘的高度设置到data中，后续可以通过它来修改定位textarea的bottom，使它弹起或者收起
})
if (keyBoardHeight === '0px') {
this.setData({
showTextara: false //键盘高度等于0时，隐藏textarea
})
}
}
},