uniapp h5键盘隐藏后页面底部空白怎么解决

1. 问题描述

在uniapp开发H5页面时，如果输入框弹出键盘后再收起键盘，会出现页面底部空白的情况。这是因为键盘弹起时，浏览器会自动将可视区域调整为输入框上方的区域，当键盘收起后，浏览器不会自动恢复原始显示区域的高度。这个问题在手机浏览器和微信浏览器上都会出现。

2. 解决方法

2.1 监听键盘收起事件

解决这个问题的思路是在键盘收起时，手动将页面恢复到原始高度。在uniapp中，可以监听键盘收起事件，具体实现方法如下：

onPageScroll(e) {
    const { scrollTop, scrollHeight, windowHeight } = e.detail;
    const keyboardHeight = this.keyboardHeight;
    if (keyboardHeight > 0 && scrollTop + windowHeight === scrollHeight) {
        // 页面高度-键盘高度
        this.contentHeight = scrollHeight - keyboardHeight;
    } else {
        this.contentHeight = scrollHeight;
    }
},
onKeyboardHeightChange(e) {
    this.keyboardHeight = e.height;
}

在页面中定义两个变量：contentHeight用于存储页面高度，keyboardHeight用于存储键盘高度，然后在onPageScroll事件中判断当前是否需要重新计算页面高度，如果需要就根据计算公式计算新的页面高度，并将contentHeight设置为新的值。onKeyboardHeightChange用于监听键盘高度变化事件，获取键盘高度并存储到keyboardHeight中。

2.2 使用window.innerHeight获取页面高度

另一种解决方法是在收起键盘时，使用window.innerHeight获取页面高度，重新设置页面的高度，代码如下：

window.addEventListener('resize', () => {
    const { innerHeight } = window;
    document.documentElement.style.height = `${innerHeight}px`;
    setTimeout(() => {
        document.documentElement.style.height = '100%';
    }, 1000 / 60);
}, false);

通过window.addEventListener监听resize事件，当页面尺寸发生变化时执行回调函数。在回调函数中，先获取当前的innerHeight值，然后将document.documentElement.style.height设置为innerHeight，等待一段时间后再将高度设置为100%。这样做的原理是将页面高度手动设置为浏览器当前的可视区域高度。

3. 总结

以上两种方法都可以解决uniapp开发H5页面收起键盘后底部出现空白的问题。第一种方法需要在页面中添加一些代码逻辑，稍微麻烦一些，但可以根据实际情况灵活调整页面高度。第二种方法代码量比较少，但有时会出现页面高度计算错误的情况。

参考资料：

uniapp键盘弹起导致底部出现空白怎么办

uniapp h5 收起输入法 页脚空白问题