【uniapp】input框置底,手机端弹出键盘时页面整体上移,解决方案
·
【uniapp】input框置底,手机端弹出键盘时页面整体上移,解决方案
<view class="fixed"
:style="{bottom: keyboardHeight+'px'}">
<input v-model="sendInfo.content" type="text"
ref="searchInput" :adjust-position="false"
:focus="isFocus = true" @blur="isFocus = false"
:placeholder="placeText" />
</view>
data() {
return {
keyboardHeight: 0
}
},
mounted() {
uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
},
beforeDestroy() {
// 组件销毁前移除监听器
uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
},
// 检测手机键盘高度
onKeyboardHeightChange(res) {
if (res.height > 0) {
// 键盘升起
this.keyboardHeight = res.height;
// console.log('键盘升起,高度:' + this.keyboardHeight);
} else {
// 键盘隐藏
this.keyboardHeight = 0;
// console.log('键盘隐藏');
}
},
在 uniapp 中,你可以使用 onKeyboardHeightChange 方法来监听键盘高度变化事件
这个方法会在键盘显示或隐藏时触发,并返回键盘的高度
更多推荐
所有评论(0)