Vue ios 移动端input 输入关闭键盘后页面底部留白

前提：

手机官网，运用vue插件vue-awesome-swiper，滑动一下就滚动一屏，最后的一页iOS和安卓都会出现键盘关闭之后，页面底部会出现空白页，也会导致滑动不是一屏的样式错乱

出现的原因：

因为失去焦点和获取焦点都是在极短时间内同时触发才导致这个原因

实现方式：

在每个输入框都定一个获取焦点事件和失去焦点的自定义事件，定一个计时器，获取焦点的时候，清除这个定时器，失去焦点的时候，开启定时器
代码如下：

<swiper1 :options="swiperOption" ref="swiperOption" :style="{height:height+'px'}">
    <swiper-slide>
        <div>
          <input type="text" v-model="tel" @focus="inputFocus($event)" @focusout="inputFocusout"/>
          ...
        </div>
    </swiper-slide>
</swiper1>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
  data(){
    return {
      swiperOption:{
        direction: 'vertical',
        height: document.body.clientHeight,
      },
      timer:null,
      height:document.body.clientHeight // 解决：两个手指按住拖动不放，也会出现空白页
    }
  },
methods: {
  inputFocus(){
    clearTimeout(this.timer)
  },
  inputFocusout() {
     this.timer = setTimeout(() => {
      window.scrollTo(0,0)
      // 间隔设为10，减少页面失去焦点定时器的突兀感，
    },10)
  }
},
// 用户离开，就只执行销毁监听事件
destroyed() {
  clearTimeout(this.timer)
}
}</script>

总结：

在网上找了好半天文档，基本上只能解决一半，然后又会引发另外的问题，基本没有一个是真正可以有用的，也是自己经验太少了，才会导致整个问题花了大半天才解决，还是自己知识储备不够。