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

背景

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

解决方案

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

2. 获取到 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
	})
}

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

效果

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