uniApp禁止遮罩弹窗下的页面滚动

文章目录

  • 问题
  • 解决
  • 代码


问题

最近用uniApp开发一款软件,页面是可以滚动的长列表,自定义组件弹窗遮罩出来后,滑动屏幕,页面也跟着滚动。研究了网上的解决办法
在遮罩层的最外层的view元素中加入
@touchmove.stop.prevent="moveHandle"

@catchtouchmove="moveHandle"
亲有效,但不太理想,会导致弹窗和底层页面都不能滚动,或者处理不当就报一些其他错误,还是不太简便


解决

其实问题的根源是浏览器的滚动穿透问题,目前还没有根本性办法解决,但可以在弹窗遮罩出来时给最外层容器设置高度来解决,亲测这个办法还是比较完美。
弹出遮罩时动态设置页面最外层容器style属性的height值为100vh。 这里最好使用单位vh100vh表示整个屏幕的高度,因为页面没有超出一屏,所以在弹窗上滑动时便不会触发底层的滚动事件,自然不会再有滚动穿透的问题。
此做法需要自定义列表滚动容器,也不是个很好的办法,表示无解


代码

<template><view class="container" :style="showMsk ? 'height: 100vh' : ''"><!-- 滚动列表 --><scroll-view scroll-y="true"></scroll-view><!-- 自定义弹窗 --><view v-if="showMsk" class="msk"></view><!-- 自定义弹窗 --><!-- <view v-if="showMsk" class="msk" @touchmove.stop.prevent="moveHandle"></view> --></view>
<template>

data() {return {showMsk: false,};
},
methods: {moveHandle: {return false;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/10894.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Llama 2 来袭 - 在 Hugging Face 上玩转它

&#x1f917; 宝子们可以戳 阅读原文 查看文中所有的外部链接哟&#xff01; 引言 今天&#xff0c;Meta 发布了 Llama 2&#xff0c;其包含了一系列最先进的开放大语言模型&#xff0c;我们很高兴能够将其全面集成入 Hugging Face&#xff0c;并全力支持其发布。Llama 2 的社…

Apache Kafka 入门教程

Apache Kafka 入门教程 一、简介简介架构 二、Kafka 安装和配置JDK安装 Kafka配置文件详解 三、Kafka 的基本操作启动和关闭Topic 创建和删除Partitions 和 Replication 配置Producer 和 Consumer 使用方法ProducerConsumer 四、Kafka 高级应用消息的可靠性保证Kafka StreamKaf…

Last Week in Milvus

Whats New 全力冲刺2.3.0发布中 Core Updates #25663 删除了 calc_distance 接口。此接口用于计算输入的向量之间的距离&#xff0c;但由于使用用户较少&#xff0c;且维护成本较高&#xff0c;会在2.3.0中将其删除。 #25031 大量用户反馈在standalone模式下&#xff0c;系统空…

将AWS S3大文件文件上传相关的API集成为js文件,功能包括 多文件并行上传、文件分片上传、断点续传、文件分片合成、上传暂停、取消上传、文件上传进度条显示

地址 https://github.com/gk-1213/easy-s3/tree/main easy-s3 将AWS S3大文件文件上传相关的API集成为js文件&#xff0c;功能包括多文件并行上传、文件分片上传、断点续传、文件分片合成、上传暂停、取消上传、文件上传进度条显示。 暂时不包括文件分片下载相关功能&#…

【业务功能篇54】Springboot项目常用工具类:HTTP状态码/客户端request

状态码常量类 /*** 返回状态码**/ public class HttpStatus {/*** 操作成功*/public static final int SUCCESS 200;/*** 对象创建成功*/public static final int CREATED 201;/*** 请求已经被接受*/public static final int ACCEPTED 202;/*** 操作已经执行成功&#xff0…

linux下用docker安装mysql

1.mysql Docker镜像 docker pull mysql:[版本号 或 latest]例&#xff1a;docker pull mysql:5.7 2.查看拉取的docker镜像 docker images3.设置 Docker 卷 docker volume create mysql-data列出 Docker 已知的所有卷 docker volume ls4.运行一个 MySQL Docker 容器 docke…

2018年全国硕士研究生入学统一考试管理类专业学位联考写作试题——解析版

2018年1月真题 四、写作&#xff1a;第56~57小题&#xff0c;共65分。其中论证有效性分析30 分&#xff0c;论说文35分。 56.论证有效性分析&#xff1a; 分析下述论证中存在的缺陷和漏洞&#xff0c;选择若干要点&#xff0c;写一篇600字左右的文章&#xff0c;对该论证的有…

【docker 安装】 与【docker-compose 安装】

不同的操作系统需要不同的docker安装文件&#xff1a;具体下载位置&#xff1a; Docker: https://download.docker.com/linux/static/stable/ docekr-compose&#xff1a;https://github.com/docker/compose/releases 1. 验证客户机器是否有docker 和docker-compose docker -…

乐维监控 | 如何快速关闭网络设备所有端口

在运维监控实践中&#xff0c;由于不同的运维人员可能会关注不同的监控指标&#xff0c;因此乐维监控在监控网络设备时&#xff0c;会默认开启所有的端口&#xff0c;尽可能多的覆盖监控指标&#xff0c;避免遗漏重要指标。但是&#xff0c;这样又会带来新的问题&#xff0c;在…

golang,gin框架的请求参数(一)--推荐

golang&#xff0c;gin框架的请求参数&#xff08;一&#xff09; gin框架的重要性不过多的强调&#xff0c;重点就gin使用中的参数传递&#xff0c;获取进行梳理文件&#xff0c;满足使用需求。 获取前端请求参数的几种方法&#xff1a; 一、获取参数【浏览器地址获取参数】…

微信小程序开发设置获取权限管理,摄像头权限,位置权限,用户信息权限等

在小程序开发的时候&#xff0c;我们总会遇到很多权限问题&#xff0c;比如摄像头权限,位置权限,用户信息权限等&#xff0c;如果不加以判断&#xff0c;很难给用户一个好的体验。 有一天&#xff0c;小明来参观一个拍照微信小程序。 他很感兴趣&#xff0c;看着精美的页面&am…

【论文阅读】定制化diffusion微调: DreamBooth原理

论文&#xff1a;DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation 项目&#xff1a;DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation 代码&#xff1a;Dreambooth-Stable-Diffusion 1. 任务简…

Kotlin基础(八):泛型

前言 本文主要讲解kotlin泛型&#xff0c;主要包括泛型基础&#xff0c;类型变异&#xff0c;类型投射&#xff0c;星号投射&#xff0c;泛型函数&#xff0c;泛型约束&#xff0c;泛型在Android中的使用。 Kotlin文章列表 Kotlin文章列表: 点击此处跳转查看 目录 1.1 泛型基…

Unity XML1——XML基本语法

一、XML 概述 ​ 全称&#xff1a;可拓展标记语言&#xff08;EXtensible Markup Language&#xff09; ​ XML 是国际通用的&#xff0c;它是被设计来用于传输和存储数据的一种文本特殊格式&#xff0c;文件后缀一般为 .xml ​ 我们在游戏中可以把游戏数据按照 XML 的格式标…

istio 常见问题排查

配置校验 istioctl validate istioctl validate 可用于校验 istio 配置文件规则&#xff0c;即&#xff1a;验证YAML文件。 istioctl analyze istioctl analyze 可用于检查istio配置潜在的问题。 如&#xff0c;校验某命名空间下资源配置&#xff1a; $ istioctl analyze…

JAVA线上问题排查降龙十八掌

现场问题一般有以下几种问题 CPU,磁盘&#xff0c;内存&#xff0c;GC问题&#xff0c;网络 同时例如jstack、jmap等工具也是不囿于一个方面的问题的&#xff0c;基本上出问题就是df、free、top 三连&#xff0c;然后依次jstack、jmap伺候&#xff0c;具体问题具体分析即可。 …

windows中文界面乱码问题

我的便携是内部返修机&#xff0c;买来时就是英文版&#xff0c;在设置中改成简体中文就可以了&#xff0c;与中文版没有什么区别&#xff0c;已经升级成win11。windows自身的应用、360之类的界面都能正常显示&#xff0c;但是个别应用总是乱码&#xff0c;根据客服的提示设置一…

非线性质量弹簧阻尼器的神经网络仿真研究(Matlab代码Simulink仿真实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

关于在虚拟机CentOS7的Docker下安装Oracle

这不三阶段了&#xff0c;要上Oracle了&#xff0c;感觉这个班卷的程度到位。二阶段我就上了ElementUI和MyBatis&#xff0c;项目也是用这些技术写的&#xff0c;整体钻研程度还行。于是布置了两个任务&#xff1a;在windows下安一下Oracle&#xff0c;在windows下安装Oracle那…

python安装第三方包的两种方式

最近研究QQ空间、微博的&#xff08;爬虫&#xff09;模拟登录&#xff0c;发现都涉及RSA算法。于是需要下一个RSA包&#xff08;第三方包&#xff09;。折腾了很久&#xff0c;主要是感觉网上很多文章对具体要在哪里操作写得不清楚。这里做个总结&#xff0c;以免自己哪天又忘…