2
首先描述一下问题场景:
在iso下的H5页面做了一个弹窗,弹窗内带输入框,给用户注册
会员用。但是测试发现输入框失去焦点时,页面没有回弹整个界面
卡死。如图!

手机图

我用的不是IOS手机 只是展示一下问题场景,有同样情况的才可
对症下药继续往下看。
然后引用一下啊一个大佬的文章也是我在解决这个问题时候看到的

原理讲解链接

这篇文章详解了为什么会出现这种情况,坐着也给出了解决办法,
但是对于多个输入框,我个人经过尝试,找到了一种新的办法,
因为如果如文章中每次都去滚动内容,交互体验方面会造成影响。
我所在项目是基于uni的一些已经封装过的input组件。
源生的这个办法也会通用。

先上input写法
<input style="flex:1" @blur="onBlur" @focus="inputFocus" type="text" placeholder="请输入手机号"/>

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毫秒的延时
    也就是说用户在失去焦点,但是没有继续获得焦点的情况下
    才会去推动屏幕。正好适合面对多个输入框的情况。
    


印第安老鹌鹑
24 声望3 粉丝

杜昕宇不让我写简介