IOS唤起键盘后--导致页面底部空白问题

场景:

在写微信项目的时候, 经常会遇到一些表单项。对于移动端项目,input(输入框)聚焦时,都会唤起设备键盘,内容输入完成,点击 “完成” 按钮,设备键盘消失,页面正常显示。

问题:

但在IOS 12.0版本----微信浏览器中常常会遇到:设备键盘消失后,当前页面底部大片空白问题,不能自动恢复整屏的页面显示。(如下图)

解决办法:
  • 让input失去焦点时,页面回到顶部即可,代码如下

template代码:

<input 
	type="text" 
	v-model="text"  
	@blur="onBlur" 
/>

js代码:

methods: {
	onBlur() {
      window.scrollTo(0, 0) // input失去焦点,让页面回顶部
    }
}

完美解决~?

发布了54 篇原创文章 · 获赞 21 · 访问量 7208

猜你喜欢

转载自blog.csdn.net/Riona_cheng/article/details/100084513