系统键盘收起后页面底部有留白问题处理

在输入框中输入完内容，当点击键盘上的完成按钮时，会发现页面底部会有一大段区域变成了白色的，高度就是原来弹起的键盘的高度，这时候如果将页面向下滑动下，会发现这块空白区域又会消失，页面也恢复了正常。

 

封装为 Vue 的自定义指令

import Vue from 'vue'
/*
* 自定义指令 v-reset-page，以解决 iOS 12 中键盘收起后页面底部有留白的问题
* */
Vue.directive('resetPage', {
  inserted: function (el) {
    // 监听键盘收起事件
    document.body.addEventListener('focusout', () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 软键盘收起的事件处理
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    })
  }
})

定义好自定义指令后，在 main.js 中引入

import store from './store'

使用自定义指令v-reset-page 就解决问题了！

<x-input type="number" v-reset-page v-model="buyCount" />

 

 

问题解决来源于参考： https://blog.csdn.net/zgh0711/article/details/89562566