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

前提:

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


效果图如下
出现的原因:

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

实现方式:

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


    
        
...
总结:

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

你可能感兴趣的:(Vue ios 移动端input 输入关闭键盘后页面底部留白)