zoukankan      html  css  js  c++  java
  • 移动端弹窗后禁止滚动

    computed:{
        popupStatus(){
            return this.SendCircle_visible || this.generateInfo_visible || this.isPosterShow;
        }
    },
    methods:{
        stopTouch(e){
            e.preventDefault();
        },
    },
    watch: { 
        popupStatus(val) {
            let preD = this.stopTouch;
            let options = { 
                passive: false, //强调默认事件
                capture: true, //早点禁止该事件 
            };
            if (val) {
                document.body.style.overflow = 'hidden';
                document.addEventListener('touchmove', preD, options); // 禁止页面滑动
            } else {
                document.body.style.overflow = ''; // 出现滚动条
                document.removeEventListener('touchmove', preD, options);
            }
        }
    }
    

    配置说明

    addEventListener目前第三个参数可以为布尔值或对象

    addEventListener(type, listener[, useCapture ])
    addEventListener(type, listener[, options ])
    

    为对象时默认配置如下

    1. capture: false
    2. passive: false
    3. once: false

    其中 capture 属性等价于以前的 useCapture 参数;once 属性就是表明该监听器是一次性的,执行一次后就被自动 removeEventListener 掉。
    passive是因为浏览器无法预先知道一个监听器会不会调用 preventDefault(),只有等监听器执行完后再去执行默认行为,因此就会导致页面卡顿。而一旦passive为true,浏览器就可以直接执行默认行为而不等待。此时即使调用了 preventDefault() 也不会生效。

  • 相关阅读:
    Spring bean相关
    Springboot消除switch-case方法
    Springcloud中的region和zone的使用
    SpringCloud-Eureka-服务注册是如何发起的
    SpringBoot-SpringCloud-版本对应关系
    SpringCloud-Eureka-Provider&Consumer
    激活IDEA
    搞懂spring事务
    部署spring Boot项目到tomcat
    springBoot项目打war包部署到tomcat上
  • 原文地址:https://www.cnblogs.com/ajaemp/p/12156619.html
Copyright © 2011-2022 走看看