uniapp微信小程序开发聊天界面开发时,输入框总是被软键盘顶起导致整个页面都上移了,但是用户只需要输入框上移并不需要整个页面上移,这就需要调整一下了。
<template>
<view>
<view class="TUI-message-input-container" :style="{'padding-bottom':Height+'px'}">
<input class="TUI-message-input-area" :adjust-position="false" cursor-spacing="20" v-model="inputText"
maxlength="140" type="text" @focus="inputBindFocus" @blur="inputBindBlur" />
</view>
</template>
<script>
export default {
data() {
return {
Height: 0,
};
},
methods: {
inputBindFocus(e) {
console.log('占位:函数 inputBindFocus 未声明');
this.Height = e.target.height;
},
inputBindBlur() {
this.Height = 0;
console.log('占位:函数 inputBindBlur 未声明');
}
}
};
</script>
其余代码删除,只记录关键代码,当输入框被激活时,获取高度,并赋予给div,当输入框失去焦点后,高度清零。