底部input获得焦点, 页面弹出软键盘时页面上移问题处理

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

正常未获得焦点情况:

获取焦点后：

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

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

<input className="barrage-input" adjustPosition="{false}" />

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

<View
  className={["barrage-bar", keyboard_height ? "untouch-bottom" : ""]}
  style={{ bottom: keyboard_height + "px" }}
>
  <View className="barrage-bar-inner">
    <Input
      className="barrage-input"
      value={input_msg}
      placeholder="有疑问？弹幕问老师..."
      placeholderStyle="color:#999999;"
      adjustPosition={false}
      onInput={this.inputMsgChange.bind(this)}
      onFocus={this.inputFocus.bind(this)}
      onBlur={this.inputBlur.bind(this)}
      onKeyboardHeightChange={this.keyboardHeightChange.bind(this)}
    ></Input>
    <View
      className={["btn btn-send", input_msg.length ? "btn-can-send" : ""]}
      onClick={this.sendMessageOnPage.bind(this)}
    >
      发送
    </View>
  </View>
</View>

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
  });
}

最终: