• 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... 问题产生的原因是一样的,应该同样可以用这个思路解决(目前没测过)。

  • 相关阅读:
    k8s存储(部署理论)
    DELL R720针对磁盘故障面板信息误报解决
    ovirt平台新建kvm操作
    宿主机计划任务执行docker相关命令
    网企-11-12
    洛谷-P1164 小A点菜
    洛谷-P1060 开心的金明
    洛谷-P1305 新二叉树
    洛谷-P1030 求先序排列
    洛谷-P1087 FBI树
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/10011575.html
走看看 - 开发者的网上家园