移动端H5 input输入完成后页面底部留白问题

说明

最近在用vue写几个H5页面在微信上展示，遇到一个在弹窗上input输入完成之后点击键盘的完成，页面底部留出一片空白的问题

出现原因分析

• 当键盘抬起时，window.scrollY会从0变到键盘的高度，所以解决办法就是当input失去焦点的时候，将window.scrollY重新设置为0

解决

• 给所有的input``textarea组件设置获取焦点和设置焦点事件，失去焦点的时候将``window.scrollY`设置为0
• 因为的是vue所以结合vue来写代码

<template>
  <input class="m-input" :value="value" @input="$emit('input', $event.target.value)" @focus="inputFocus()" @focusout="inputFocusOut">
</template>

<script>
  export default {
    name: "MInput",
    props:['value'],
    data(){
      return{
        timer:null
      }
    },
    methods:{
      inputFocus(){
        if(this.timer){
          clearTimeout(this.timer)
        }
      },
      inputFocusOut(){
        this.timer = setTimeout(() => {
          window.scrollTo(0,0)
        },10)
      }
    },
    destroyed(){
      if(this.timer){
        clearTimeout(this.timer)
      }
    }
  }
</script>

• 获取焦点事件，判断定时器是否存在如果存在的话清除掉（上一个input设置的定时器）
• 失去焦点事件，将window.scrollY设置为0,并且给一个10的定时器，减少页面失去焦点的突兀感（为了顺滑一点点）
• destroyed vue组件中如果使用了定时器，一定要记得在组件销毁的生命周期里将清时期清除掉，防止全局定时器过多，容易爆栈

最后

• 本文首发于:移动端H5 input输入完成后页面底部留白问题