【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 方法来监听键盘高度变化事件

这个方法会在键盘显示或隐藏时触发,并返回键盘的高度

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐