首先描述一下问题场景: 在iso下的H5页面作了一个弹窗,弹窗内带输入框,给用户注册 会员用。可是测试发现输入框失去焦点时,页面没有回弹整个界面 卡死。如图!
我用的不是IOS手机 只是展现一下问题场景,有一样状况的才可 对症下药继续往下看。 而后引用一下啊一个大佬的文章也是我在解决这个问题时候看到的
原理讲解连接vue
这篇文章详解了为何会出现这种状况,坐着也给出了解决办法, 可是对于多个输入框,我我的通过尝试,找到了一种新的办法, 由于若是如文章中每次都去滚动内容,交互体验方面会形成影响。 我所在项目是基于uni的一些已经封装过的input组件。 源生的这个办法也会通用。
先上input写法 <input style="flex:1" @blur="onBlur" @focus="inputFocus" type="text" placeholder="请输入手机号"/>
post
vue内的方法 inputFocus() { // #ifdef H5 this.hasDown=true; // #endif }, onBlur(){ // #ifdef H5 this.hasDown=false; setTimeout(() => { if(!this.hasDown){ window.scrollTo(0,0); document.getElementsByTagName('body')[0].scrollTop = 0; } }, 200); // #endif }, 而后说一下原理,其实原理很简单,为了避免影响用户体验, 不会再每次失去焦点的时候推进屏幕,而是作了200毫秒的延时 也就是说用户在失去焦点,可是没有继续得到焦点的状况下 才会去推进屏幕。正好适合面对多个输入框的状况。