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

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

正常未获得焦点情况:

normal

获取焦点后：

focus

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

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

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

adjust-position

所以需要通过输入框获得焦点, 失去焦点以及软键盘高度变化时获取软键盘高度对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
    });
  }

最终: