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

  • 相关阅读:
    TD课程通的最终版评价
    对学长TD课程通(.apk)的评价
    Angular速查表
    RxJS学习——官网已不推荐使用的方法及替代方案
    Angular学习问题笔记 (2020.6.17)
    技术分享:基本排序算法
    angular4+ionic3 运行报错 Ineffective mark-compacts near heap limit Allocation failed
    Sass混合指令@mixin和@include用法示例
    Git简介、安装和相关配置
    【Angular学习笔记】英雄编辑器
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/10011575.html
Copyright © 2011-2022 走看看