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() 也不会生效。

  • 相关阅读:
    Myeclipse 10.7 android(安卓) 开发环境搭建
    matplotlib
    tophat cufflinks cuffcompare cuffmerge 的使用
    shell 随机从文件中抽取若干行
    liftover的使用/用法
    命令行运行R语言脚本(代码)
    R: NULL, NA, and NaN
    SOME USEFUL MACHINE LEARNING LIBRARIES.
    Flutter实战:手把手教你写Flutter Plugin
    Flutter学习笔记(五)
  • 原文地址:https://www.cnblogs.com/ajaemp/p/12156619.html
Copyright © 2011-2022 走看看