uniapp微信小程序输入框页面被顶起 处理

uniapp yekong 3022℃

uniapp微信小程序开发聊天界面开发时,输入框总是被软键盘顶起导致整个页面都上移了,但是用户只需要输入框上移并不需要整个页面上移,这就需要调整一下了。
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,当输入框失去焦点后,高度清零。

微信小程序禁止软键盘顶起页面

喜欢 (1)