关于页面input导致页面可滑动问题(iOS上)

关于页面input导致页面可滑动问题(iOS上)

安卓关于弹出键盘问题可以用resize解决
解决方案:滑动页面的时候让对应的input失去焦点(默认滚动不失去焦点)

1.给input组件添加获取焦点事件,并传人对应input的参数

@onFocus="onFocus(0)"  //input绑定获取焦点事件

2.追加事件

onFocus(val){  //获取焦点事件
this.isScroll=true
   setTimeout(()=>{
            if(this.isScroll){
              this.inputName=val
              window.addEventListener('scroll', this.scrollEvent);
            }
          },800)
 }, 
  scrollEvent(){  //滚动事件
   var input1 =document.getElementsByClassName('inputState')[this.inputName]
   input1.blur()
   window.removeEventListener('scroll', this.scrollEvent);
 },
 getBlure(){  //失去焦点事件(过快失去焦点的时候不去绑定事件)
          this.isScroll=false
      },

如果页面有多个input,需要在input失去焦点或者其判断事件触发后移除滚动事件

3.销毁

   destroyed() {    //清除scroll事件
      window.removeEventListener('scroll', this.scrollEvent);
    },
posted @ 2018-04-13 10:34  wings-lhw  阅读(629)  评论(0编辑  收藏  举报