当前位置: 首页 > news >正文

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;}
}

相关文章:

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

文章目录 问题解决代码 问题 最近用uniApp开发一款软件&#xff0c;页面是可以滚动的长列表&#xff0c;自定义组件弹窗遮罩出来后&#xff0c;滑动屏幕&#xff0c;页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的view元素中加入 touchmove.stop.prevent"moveH…...

【Huawei】WLAN实验(三层发现)

拓扑图如上&#xff0c;AP与S1在同一VLAN,S1与AC在同一VLAN&#xff0c;AP采用三层发现AC&#xff0c;AP与客户的DHCP由S1提供。 S1配置 vlan batch 10 20 30 dhcp enable ip pool apgateway-list 192.168.20.1network 192.168.20.0 mask 255.255.255.0option 43 sub-option …...

Windows 10 安装 PostgreSQL 12.x 报错 ‘psql‘ 不是内部或外部命令 由于找不到文件libintl-9.dll等问题

目录 序言一、问题总结问题 1 psql 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。问题 2 “由于找不到文件libintl-9.dll&#xff0c;无法继续执行代码&#xff0c;重新安装程序可能会解决此问题。“1、卸载2、安装3、安装 Stack Builder &#xff08;这个可…...

在CSDN学Golang云原生(持续交付Argo)

一&#xff0c;Argo安装配置 Argo是一个基于Kubernetes的容器本地工作流引擎&#xff0c;可以帮助用户在Kubernetes上创建、运行和维护容器化应用程序。下面是Argo安装配置的步骤&#xff1a; 首先确保你已经安装了kubectl和helm添加chart仓库 $ helm repo add argo https:/…...

安全运维 -- splunk 集群配置归档

0x00 背景 splunk 集群索引服务器容量满了以后&#xff0c;为了防止数据丢失&#xff0c;需要对旧数据进行归档保存。 0x01 原理 指定一台大容量服务器&#xff0c;创建共享文件夹&#xff0c;并将集群里的所有indexer指向这个归档共享目录。 0x02 实施 集群的每个indexer都…...

使用kind在mac本地搭建k8s及istio

序 之前使用multipass装ubuntu&#xff0c;然后再用microk8s搭建k8s&#xff0c;这会直接用orbstack及kind在本地搭建k8s及istio 安装 orbstack 通过orbstack这个地址下载&#xff0c;主要是开销低&#xff0c;用来替代docker desktop 添加国内源 ~/.orbstack/config/dock…...

11、springboot项目启动时对容器中的bean进行延迟初始化

springboot项目启动时对容器中的bean进行延迟初始化 预初始化&#xff1a; Spring Boot在启动应用时&#xff0c;会启动Spring容器&#xff0c;当启动Spring容器时&#xff0c;Spring会自动初始化容器中所有的singleton Bean——这是默认行为 预初始化的好处&#xff1a; 1、项…...

树莓派镜像安装 + 设置 + 镜像批量化操作 - 自动化烧写SD Card (三)

简介 仍然强调所有的测试都是来自树莓派3B, 并使用手头上的绿联读卡器进行测试;实现方案: 如 《树莓派镜像安装 设置 镜像批量化操作 - USB boot (二)》中所写&#xff0c; 可以使用树莓派USB挂载方式, 编写自动化脚本, 当有对应的设备出现的时候&#xff0c;格式化 烧写镜…...

C++继承特性(4)——友元与静态

目录 一.继承与友元的关系 二.继承与静态成员的关系 先回顾一下静态成员变量&#xff1a; 运行TestPerson()函数&#xff1a; 测试案例2&#xff1a; 三.练习题&#xff1a; 一.继承与友元的关系 友元关系不能被继承&#xff0c;也就是说父类中的友元函数不能访问子类私…...

VR党建主题数字互动虚拟展馆软件开启党建铸魂育人新篇章

当今时代新媒体技术的发展对大学生的学习、生活等产生着深远的影响。高校作为党建育人的重要场所&#xff0c;充分借助VR技术的强大优势&#xff0c;合理运用到育人工作中&#xff0c;能够不断丰富教育内容。VR智慧党建展厅展馆结合VR技术营造的虚拟现实空间&#xff0c;将党的…...

单网卡实现 双IP 双网段(内外网)同时运行

前提是内外网是同一网线连接&#xff08;双网线双网卡的具体可以自己搜索下。理论上都设置静态IP后把外网跃点设置小&#xff0c;内网跃点设置大&#xff0c;关闭自动跃点设置同一个接口跃点数&#xff0c;在通过命令提示符添加内网网址走内网网关就可以了&#xff09;。 需要使…...

C# 委托2

一.委托 1.委托概述&#xff1a; &#xff08;1&#xff09;声明一个委托类型。委托声明看上去和方法声明相似&#xff0c;只是没有实现块。 &#xff08;2&#xff09;使用该委托类型声明一个委托变量 &#xff08;3&#xff09;创建委托类型的对象&#xff0c;把它赋值给委…...

【计算机网络】网络层协议 -- IP协议

文章目录 1. 网络层做了什么事2. IP协议的简介3. IP协议格式4. 分片与组装5. 网段划分6. 特殊的IP地址7. IP地址的数量限制8. 私网IP地址和公网IP地址9. 路由 1. 网络层做了什么事 保证数据可靠地从一台主机到另一台主机 当双方在进行基于TCP的网络通信时&#xff0c;要保证将数…...

记录浙政钉的消息通知的一次开发实战记录

先忍不住吐槽下钉钉的开发文档&#xff0c;实在是不敢恭维&#xff0c;首先每个术语描述都是不统一的&#xff0c;比如有些地方写“”群聊“”&#xff0c;有些地方写“会话”&#xff0c;有些地方写“钉消息”&#xff0c;总之他们自己想怎么写&#xff0c;怎么写&#xff0c;…...

详解主流的Hybrid App 技术框架与研发方案

移动操作系统在经历了诸神混战之后&#xff0c;BlackBerry OS、Symbian OS、Windows Phone等早期的移动操作系统逐渐因失去竞争力而退出。目前&#xff0c;市场上主要只剩下安卓和iOS两大阵营&#xff0c;使得iOS和安卓工程师成为抢手资源。然而&#xff0c;由于两者系统的差异…...

【软件测试】性能测试工具- LoadRunner的介绍和使用

目录 1. LoadRunner是什么2. LoadRunner环境搭建3. LoadRunner三大组件4. LoadRunner脚本录制4.1 WebTous项目介绍启动WebTous项目访问WebTous项目相关配置 4.2 脚本录制新建脚本录制脚本运行脚本 4.3 脚本加强插入事务插入集合点插入检查点插入日志字符串比较 1. LoadRunner是…...

react

react权威面试题 1.jsx转化过程2.fiber架构的理解&#xff0c;解决了什么问题&#xff1f;理解fiber是什么 3.react diff原理tree diffcomponent diffelement diff 4.如何提高组件渲染效率shouldComponentUpdatePureComponentReact.memo 5.react中render方法原理&#xff0c;触…...

AI入门:了解人工智能的基础知识

介绍 人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一门研究如何使机器能够智能地模拟人类思维和行为的科学与技术领域。在过去几十年里&#xff0c;AI取得了显著的发展&#xff0c;并且在各个领域都产生了深远的影响。本文将引导您进入AI的世…...

ACL原理

ACL原理 ACL是一种用于控制网络设备访问权限的技术&#xff0c;可以通过配置ACL来限制特定用户、应用程序或网络设备对网络资源的访问。 1、ACL&#xff08;Access Control List&#xff09; 2、ACL是一种包过滤技术。 3、ACL基于IP包头的IP地址、四层TCP/UDP头部的端口号、…...

EP4CE6E22C8N Error: Can‘t recognize silicon ID for device 1

经过各种排查&#xff0c;发现是AS配置不对&#xff0c;仅供参考 工程 参考某处的工程画板配置的FPGA板子&#xff0c;用于学习入门FPGA。 烧录sof文件是正常的&#xff0c;并能正常运行。 但是烧录jic是failed&#xff0c;查看报错为&#xff1a;Error: Can’t recognize si…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...