uniApp禁止遮罩弹窗下的页面滚动
文章目录
- 问题
- 解决
- 代码
问题
最近用
uniApp
开发一款软件,页面是可以滚动的长列表,自定义组件弹窗遮罩出来后,滑动屏幕,页面也跟着滚动。研究了网上的解决办法
在遮罩层的最外层的view
元素中加入
@touchmove.stop.prevent="moveHandle"
或
@catchtouchmove="moveHandle"
亲有效,但不太理想,会导致弹窗和底层页面都不能滚动,或者处理不当就报一些其他错误,还是不太简便
解决
其实问题的根源是浏览器的滚动穿透问题,目前还没有根本性办法解决,但可以在弹窗遮罩出来时给最外层容器设置高度来解决,亲测这个办法还是比较完美。
弹出遮罩时动态设置页面最外层容器style
属性的height
值为100vh
。 这里最好使用单位vh
,100vh
表示整个屏幕的高度,因为页面没有超出一屏,所以在弹窗上滑动时便不会触发底层的滚动事件,自然不会再有滚动穿透的问题。
此做法需要自定义列表滚动容器,也不是个很好的办法,表示无解
代码
<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开发一款软件,页面是可以滚动的长列表,自定义组件弹窗遮罩出来后,滑动屏幕,页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的view元素中加入 touchmove.stop.prevent"moveH…...

【Huawei】WLAN实验(三层发现)
拓扑图如上,AP与S1在同一VLAN,S1与AC在同一VLAN,AP采用三层发现AC,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 不是内部或外部命令,也不是可运行的程序或批处理文件。问题 2 “由于找不到文件libintl-9.dll,无法继续执行代码,重新安装程序可能会解决此问题。“1、卸载2、安装3、安装 Stack Builder (这个可…...
在CSDN学Golang云原生(持续交付Argo)
一,Argo安装配置 Argo是一个基于Kubernetes的容器本地工作流引擎,可以帮助用户在Kubernetes上创建、运行和维护容器化应用程序。下面是Argo安装配置的步骤: 首先确保你已经安装了kubectl和helm添加chart仓库 $ helm repo add argo https:/…...
安全运维 -- splunk 集群配置归档
0x00 背景 splunk 集群索引服务器容量满了以后,为了防止数据丢失,需要对旧数据进行归档保存。 0x01 原理 指定一台大容量服务器,创建共享文件夹,并将集群里的所有indexer指向这个归档共享目录。 0x02 实施 集群的每个indexer都…...
使用kind在mac本地搭建k8s及istio
序 之前使用multipass装ubuntu,然后再用microk8s搭建k8s,这会直接用orbstack及kind在本地搭建k8s及istio 安装 orbstack 通过orbstack这个地址下载,主要是开销低,用来替代docker desktop 添加国内源 ~/.orbstack/config/dock…...

11、springboot项目启动时对容器中的bean进行延迟初始化
springboot项目启动时对容器中的bean进行延迟初始化 预初始化: Spring Boot在启动应用时,会启动Spring容器,当启动Spring容器时,Spring会自动初始化容器中所有的singleton Bean——这是默认行为 预初始化的好处: 1、项…...
树莓派镜像安装 + 设置 + 镜像批量化操作 - 自动化烧写SD Card (三)
简介 仍然强调所有的测试都是来自树莓派3B, 并使用手头上的绿联读卡器进行测试;实现方案: 如 《树莓派镜像安装 设置 镜像批量化操作 - USB boot (二)》中所写, 可以使用树莓派USB挂载方式, 编写自动化脚本, 当有对应的设备出现的时候,格式化 烧写镜…...

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

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

单网卡实现 双IP 双网段(内外网)同时运行
前提是内外网是同一网线连接(双网线双网卡的具体可以自己搜索下。理论上都设置静态IP后把外网跃点设置小,内网跃点设置大,关闭自动跃点设置同一个接口跃点数,在通过命令提示符添加内网网址走内网网关就可以了)。 需要使…...
C# 委托2
一.委托 1.委托概述: (1)声明一个委托类型。委托声明看上去和方法声明相似,只是没有实现块。 (2)使用该委托类型声明一个委托变量 (3)创建委托类型的对象,把它赋值给委…...

【计算机网络】网络层协议 -- IP协议
文章目录 1. 网络层做了什么事2. IP协议的简介3. IP协议格式4. 分片与组装5. 网段划分6. 特殊的IP地址7. IP地址的数量限制8. 私网IP地址和公网IP地址9. 路由 1. 网络层做了什么事 保证数据可靠地从一台主机到另一台主机 当双方在进行基于TCP的网络通信时,要保证将数…...
记录浙政钉的消息通知的一次开发实战记录
先忍不住吐槽下钉钉的开发文档,实在是不敢恭维,首先每个术语描述都是不统一的,比如有些地方写“”群聊“”,有些地方写“会话”,有些地方写“钉消息”,总之他们自己想怎么写,怎么写,…...

详解主流的Hybrid App 技术框架与研发方案
移动操作系统在经历了诸神混战之后,BlackBerry OS、Symbian OS、Windows Phone等早期的移动操作系统逐渐因失去竞争力而退出。目前,市场上主要只剩下安卓和iOS两大阵营,使得iOS和安卓工程师成为抢手资源。然而,由于两者系统的差异…...

【软件测试】性能测试工具- 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架构的理解,解决了什么问题?理解fiber是什么 3.react diff原理tree diffcomponent diffelement diff 4.如何提高组件渲染效率shouldComponentUpdatePureComponentReact.memo 5.react中render方法原理,触…...
AI入门:了解人工智能的基础知识
介绍 人工智能(Artificial Intelligence,简称AI)是一门研究如何使机器能够智能地模拟人类思维和行为的科学与技术领域。在过去几十年里,AI取得了显著的发展,并且在各个领域都产生了深远的影响。本文将引导您进入AI的世…...

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

EP4CE6E22C8N Error: Can‘t recognize silicon ID for device 1
经过各种排查,发现是AS配置不对,仅供参考 工程 参考某处的工程画板配置的FPGA板子,用于学习入门FPGA。 烧录sof文件是正常的,并能正常运行。 但是烧录jic是failed,查看报错为:Error: Can’t recognize si…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...

HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...

以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...

GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...

解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...