解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题

前几天开发中遇到的问题,vue移动端页面,点击输入框页面被顶起不能自动回弹到底部,底部会留白问题。网上查了很多方法试过都没用,最终还是找到了一个很有用的解决方式,下面提供解决方法,有需要的直接可以拿去用

先看下问题的效果图吧:

解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题_第1张图片 ios环境下点击输入框页面被顶起不能自动回弹到底部,底部留白问题

 

第一步:在页面的输入框中添加获取焦点事件  代码写法: @focus="getFocus"   可直接拷贝拿去放在自己页面元素中,如下:

   

第二步:在methods 方法中声明 获取焦点事件 如下写法,下面代码直接拷贝即可

 methods: {
    getFocus() {
      $("input,textarea").on("blur", function() {
        window.scroll(0, 0);
      });
    },
}

第四:实现原理:
      原理就是弹起键盘的时候,window.scrollY会从0变到键盘的高度(例如:200),当输入框焦点失去后让scrollY回到0就好了。

以上是我前几天遇到的问题,大家需要的可以直接复制粘贴放在自己的项目中即可。完美解决问题!最近太忙,有时候遇到问题总是没时间记录博客,觉得有用点关注,以后遇到问题及时更新博客,希望对大家有帮助,互相学习!

你可能感兴趣的:(vue,移动端,兼容ios,点击输入框页面被顶起不能回弹)