[微信小程序]底部input获得焦点, 页面弹出软键盘时页面上移问题处理

在开发时经常会遇到底部输入框的需求, 比如聊天界面, 评论, 直播弹幕等等, 但是在微信小程序内存在一个问题, 在底部input获得焦点时页面弹出软键盘页面会整体上移, 不管页面元素是否为fixed等.

正常未获得焦点情况:

normal

获取焦点后：

focus

微信官方提供了一个adjustPosition属性, 键盘弹起时，是否自动上推页面.

将input的adjust-position设为false之后, 弹出软键盘后页面不会上移, 但是会导致输入框被软键盘覆盖.

adjust-position

所以需要通过输入框获得焦点, 失去焦点以及软键盘高度变化时获取软键盘高度对input位置进行手动设置.

  
    
    
      发送
    
  

  inputFocus(e) {
    // 输入框获取焦点, 通过软键盘高度设置输入框位置
    this.setState({
      keyboard_height: e.detail.height
    });
  }

  inputBlur(e) {
    this.setState({
      keyboard_height: 0
    });
  }

  keyboardHeightChange(e) {
    this.setState({
      keyboard_height: e.detail.height
    });
  }

最终: