微信小程序唤起键盘页面溢出的解决方案

Beis

于 2023-05-06 11:35:14 发布

阅读量759

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_45722941/article/details/130523618

版权

文章讲述了在微信小程序中，由于input组件的adjust-position属性可能导致其他元素位置异常。解决方案是通过获取键盘高度，动态调整页面高度，保持元素比例不变。在input聚焦和失焦时，分别更新键盘高度数据，从而避免页面压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

背景

微信小程序的 input 组件，如果使用自带的adjust-position会引起除了 input 元素的其他元素一并上移。

解决方案

首先获取到屏幕的高度screenHeight，确定好每个元素所占的大小。在我的项目里screenHeight就是我整个页面的高度，再直接根据 screenHeight的百分比设置好每个容器的大小。
获取到 keyboard 的高度，并赋值：

<input class="input-area"
		adjust-position="{{false}}"
		bind:focus="onInputFocus" bind:blur="onInputBlur"
/>

onInputFocus(e) {

	if (e.detail.height) {
		this.setData({
			keyboardHeight: e.detail.height - 20
		})
	}
},
onInputBlur() {
	this.setData({
		keyboardHeight: 0
	})
}

将页面的高度设置为 screenHeight - keyboardHeight

效果

这样做可以保证页面内原有元素的高度比例不被压缩。