微信小程序监听键盘变化改变textarea位置_wx.onkeyboardheightchange

需求：做一个能够点击评论后自动弹起键盘并且在键盘上有一个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)
})
}，
1
2
3
4
5

 comment() {
  this.setData({
       showTextara: true,//将textarea显示，聚焦自动拉起键盘，此时触发了onKeyboardHeightChange
   })
1
2
3
4

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
          }) 
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18