vue 项目,在 iPhoneX 的微信浏览器中点击输入框弹出键盘输入法,窗口高度会变小,关闭键盘后底部会出现留白的问题,需要滑动页面才能恢复正常 (解决问题思路就是在 blur 等事件之后让页面滚动下从而恢复 window 的高度)
### 核心代码,给 input 的 blur 事件下面的事件处理函数,下面是 vue 指令的写法,根据具体使用情况修改为对应的写法
const windowHeight = window.innerHeight
Vue.directive('fixedInput', function (el, binding) {
el.addEventListener('blur', function () {
let windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
return
}
console.log(windowHeight + '--' + windowFocusHeight);
console.log('修复');
let currentPosition;
let speed = 1; //页面滚动距离
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); //页面向上滚动
currentPosition += speed; //speed变量
window.scrollTo(0, currentPosition); //页面向下滚动
})
}
