• ios中picker滑动穿透bug


    Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动,这使得用户体验很不好。

    方案1:由于picker组件的滚动是用touch事件 + translate实现的,所以,我们可以在picker弹层出现的时候禁止页面的默认滚动机制,picker弹层消失的时候解除禁用页面的默认滚动机制。

    data () {
        return {
    
          /*---------监听函数--------------*/
          handler:function(e){e.preventDefault();}
        }
      },
      // 通过监听蒙层的显隐字段来控制页面滚动的禁用事件 或者在method方法里控制
     watch:{
         maskShow:function(newvs,oldvs){//picker关闭没有回调函数,所以侦听该属性替代
            if(newvs){
               this.closeTouch();
            }else{
               this.openTouch();
            }
         }
      },
      methods:{
        /*解决iphone页面层级相互影响滑动的问题*/
        closeTouch:function(){   /*  弹层出现时调用  */
            document.getElementsByTagName("body")[0].addEventListener('touchmove',
            this.handler,{passive:false});//阻止默认事件
            console.log("closeTouch haved happened.");
        },
        openTouch:function(){   /*  弹层关闭时调用  */
            document.getElementsByTagName("body")[0].removeEventListener('touchmove',
            this.handler,{passive:false});//打开默认事件
            console.log("openTouch haved happened.");
        },
        openPicker(){  /* 弹层出现 */
            this.openTouch();
        },
        closePicker(){  /* 弹层关闭   */
            this.openTouch();
        }
      },
    

    方案2:当弹层出现的时候设置body{overflow: hidden;},弹层关闭时设置body{overflow: scroll/auto;}

    除了mint-ui的picker,其他库的picker组件可能也会有类似问题。比如vux、weui... 问题产生的原因是一样的,应该同样可以用这个思路解决(目前没测过)。

  • 相关阅读:
    你有犯错的权利
    面对人生这道程序,该如何编码?
    如何面对失败?
    知行:成长的迭代之路
    一份软件工程行业生存指南
    知行:程序员如何保持二者的平衡
    花钱的习惯
    互联网金融涌动下的冲动与借债
    docker 常用命令
    java 静态变量 静态代码块 加载顺序问题
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/10011575.html
Copyright © 2020-2023  润新知