移动端键盘顶起解决方案

混合开发大法好

但是在安卓手机上, 获取焦点后手机键盘会弹起, 手动把键盘隐藏下去时会把屏幕卡住, 页面显示区域依然是手机键盘弹起的时候的那块区域

所以我们失去焦点的时候需要重新计算高度, 让页面正常显示

data() {
    return {
    	docmHeight: document.documentElement.clientHeight, //一开始的屏幕高度
        showHeight: document.documentElement.clientHeight //一开始的屏幕高度
    }
}

mounted() {
    window.onresize = () => {
        // 获取屏幕的高度
        return (() => {
            window.screenHeight = document.body.clientHeight;
            this.showHeight = window.screenHeight;
        })();
    };
}

watch: {
    showHeight: 'inputType' // 监听窗口高度变化执行的方法
}

methods: {
	// 检测屏幕高度变化
    inputType() {
        setTimeout(() => {
            if (this.docmHeight > this.showHeight) {
                // 键盘弹起
            } else if (this.docmHeight <= this.showHeight) {
                // 键盘收起
            }
        }, 20);
    },

}

上面代码就是在vue中使用监听页面高度的方式来解决键盘问题