在开发时经常会遇到底部输入框的需求, 比如聊天界面, 评论, 直播弹幕等等, 但是在微信小程序内存在一个问题, 在底部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
});
}
最终:
