Taro3.x 容易踩坑的点(阻止滚动穿透,弹框蒙层父级定位)

解决弹框滚动的时候,下层也会滚动问题=》阻止滚动穿透(react,vue)
案例描述:
页面展示时需要滚动条才可以显示完整,但是当我们显示弹框的时候,即使不需要滚动条,但是页面仍然可以滚动,并且下层内容会随着滚动变化。
阻止滚动穿透
Taro 3 的事件机制。因为事件都以 bind 的形式进行绑定,因此不能使用 e.stopPropagation() 阻止滚动穿透。
针对滚动穿透,目前总结了两种解决办法:
一、样式
使用样式解决:禁止被穿透的组件滚动。
这也是最推荐的做法。
二、catchMove
Taro 3.0.21 版本开始支持
但是地图组件本身就是可以滚动的,即使固定了它的宽高。所以第一种办法处理不了冒泡到地图组件上的滚动事件。
需要真机预览或者模拟查看,pc模拟器上看不出效果。
在需要的弹框scroll-view 外层加上下面的内容包裹scroll-view 使用后真机上将不会滚动下层内容
<View catchMove></View>
解决弹框内部再显示其余的弹框,父级高度的定位限制,(RootPortal)
root-portal 使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
案例描述:
以我项目中为例,使用了taro-ui的‘AtFloatLayout’组件,
项目中当我使用'AtFloatLayout'显示购物车后,内部又嵌套了一个‘AtModal’来展示点击购物车内部商品时出现切换规格的弹框;
此时如果不作处理,AtModal的最大高度是AtFloatLayout的高度,如果AtFloatLayout比较低AtModal无法再整个页面中上下居中显示,且可能会显示不全。
例如此图:未添加root-portal 的情况

解决方案:
<AtFloatLayout><RootPortal><AtModal></AtModal></RootPortal>
</AtFloatLayout>
成功后模拟器element显示

解决后显示上下居中 以窗口最大为父级
成功解决弹框内部再显示其余的弹框高度的问题

相关文章:
Taro3.x 容易踩坑的点(阻止滚动穿透,弹框蒙层父级定位)
解决弹框滚动的时候,下层也会滚动问题》阻止滚动穿透(react,vue)案例描述:页面展示时需要滚动条才可以显示完整,但是当我们显示弹框的时候,即使不需要滚动条,但是页面仍然可以滚动,并且下层内容会随着滚动变…...
SpringBoot+ActiveMQ-发布订阅模式(消费端)
ActiveMQ消息中间件的发布订阅模式 主题 topictopic生产端案例(配合topic消费端测试):SpringBootActiveMQ Topic 生产端ActiveMQ版本:apache-activemq-5.16.5案例源码:SpringBootActiveMQ-发布订阅DemoSpringBoot集成ActiveMQ Topic消费端的pom.xml<?…...
vscode下使用arduino插件开发ESP32 Heltec WiFi_Kit_32_V3
下载vsCode 添加 arduino 插件 在Arduino IDE 中添加开发板,注意只能用右侧的开发板管理器添加,自己下载之后复制进去的IDE认,但是vsCode不认,搜索ESP32 第一个库里面只有到V2的,没有V3,要安装下面那个 H…...
吐血整理AutoSAR Com-Stack 的配置【基于ETAS】
总目录链接>> AutoSAR入门和实战系列总目录 文章目录01.软件组件和系统说明02.基本软件配置03.系统数据映射04.代码生成05.代码整合06.测试下图显示了基于 AUTOSAR 的 ECU SW 的结构。纵观BSW,大体分为三层。三层模块中,与通信相关的模块称为通信…...
面向对象进阶之元类
6. 元类 Python 中一切皆对象,对象是由类实例化产生的。那么类应该也有个类去产生它,利用 type() 函数我们可以去查看: class A:pass a1 A() print(type(a1)) print(type(A))<class __main__.A> <class type>由上可知…...
【Android AIDL之详细使用】
Android AIDL之详细使用一级目录概述使用场景语法相关编码实践服务端:java文件修改AndroidManifest客户端坑一级目录 概述 AIDL叫Android接口定义语言,是用于辅助开发者完成Android跨进程编程的工具。 从某种意义上说AIDL其实是一个模板,因…...
ASP.NET MVC | 简介
目录 前提 1.教程 2.MVC 编程模式 最后 前提 在学习学过很多课程,但是最主要学的还是ASP.NET MVC这门课程,工作也是用的ASP.NET MVC,所以写一点ASP.NET MVC的东西,大家可以来看看,我自己不会的时候也不用找别的地方…...
95后刚毕业2、3年就年薪50W,才发现,打败我们的不是年龄····
一刷朋友圈,一读公众号,一打开微博,甚至是一和朋友聊天,这些让人焦虑的话题总会铺天盖地的袭来: Ta刚毕业半年,就升职加薪当上了测试主管 (同样是一天24小时,为什么同龄人正在抛弃…...
动态分析和静态分析最主要的区别是什么?
动态分析和静态分析主要的区别是什么? 动态分析和静态分析的主要区别是是否考虑时间因素。 动态分析(dynamic analysis)是相对于静态分析来讲的,动态分析是只改变一下自变量,因变量相应的做出的改变,动态改…...
WebUI 学习笔记
WebUI 学习笔记 背景此插件主要用于在数字孪生方向做 UI 显示的效果。比如一些温度曲线需要显示出来,可以直接用插件,配合html 文件,直接显示出来。 准备工作我们采用4.27 版本进行开发;...
C# 中常见的设计模式附带代码案例
设计模式是一套被广泛应用于软件设计的最佳实践,它们可以帮助开发者解决特定的问题,提高代码的可重用性、可读性和可维护性。本文将介绍 C# 中常见的几种设计模式,并提供相应的示例代码。 工厂模式 工厂模式是一种创建型设计模式,…...
秋招面试问题整理之机器学习篇
文章目录随机森林在决策树的哪些方面做出了改进随机森林里每棵树的权重不一定会变成什么模型方差和偏差,正则化解决的是方差大还是偏差大的问题正则化的方法总结了解VC维吗svd了解吗随机森林在决策树的哪些方面做出了改进 回答思路: 随机森林和决策树有…...
SuperMap超图使用简单笔记
1 需求: 项目使用的是openlayer和Cesium,现在需要使用超图的图层,和引入实景公路功能。 2 使用过程中出现一下疑问点记录如下 : 超图: 北京超图软件股份有限公司是全球第三大、亚洲最大的地理信息系统(G…...
从0探索NLP——神经网络
从0探索NLP——神经网络 1.前言 一提人工智能,最能想到的就是神经网络,但其实神经网络只是深度学习的主要实现方式。 现在主流的NLP相关任务、模型大都是基于深度学习也就是构建神经网络实现的,所以这里讲解一下神经网络以及简单的神经网络…...
计算机操作系统和进程
✨个人主页:bit me👇 ✨当前专栏:Java EE初阶👇 ✨每日一语:心平能愈三千疾,心静可通万事理。 目 录🐬一. 操作系统🍦1. 操作系统是什么?🍨2. 操作系统的两个…...
JAVA服务端实现页面截屏(附代码)
JAVA服务端实现页面截屏适配需求方案一、使用JxBrowser使用步骤:方案二、JavaFX WebView使用步骤:方案三、Headless Chrome使用步骤:综上方案对比记录我的一个失败方案参考适配需求 有正确完整的地址url;通过浏览器能打开该url对…...
Java入门要知道!
首先我们都知道的是Java是一门面向对象的编程语言,不仅吸收了C语言的各种优点,还摒弃了C里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向…...
[6/101] 101次软件测试面试之经典面试题剖析
01、自我介绍答:大家好,我是一名软件测试工程师,但我更喜欢称自己为“软件bug捕手”。我相信,软件测试工程师的使命就是让软件更加健壮、更加可靠、更加美好。我们就像是一群“特警”,在黑暗的代码中寻找漏洞和缺陷&am…...
电脑c盘满了变成红色了怎么清理,清理c盘详细攻略
我们的电脑当用了一段时间之后,其实自然而然的就会有一点点卡,其实这是因为我们的电脑c盘满了,所以会造成卡顿是正常的,今天我们就来聊一聊电脑c盘满了变成红色了怎么清理? 一.电脑c盘为啥会满 软件安装:当…...
现在的00后,实在是太卷了
现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的,工作没两年,跳槽到我们公司起薪18K,都快接近我了。后来才知道人家是个卷王,从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天,原来这位小老弟家里条…...
工业数据采集避坑指南:Java+Utgard实现OPC DA高可靠通信的3个关键技巧
工业数据采集避坑指南:JavaUtgard实现OPC DA高可靠通信的3个关键技巧 在工业自动化领域,OPC DA(OLE for Process Control Data Access)协议作为连接工业设备和信息系统的桥梁,其稳定性直接关系到生产数据的完整性和实时…...
三步搞定B站视频转文字:终极高效内容提取方案
三步搞定B站视频转文字:终极高效内容提取方案 【免费下载链接】bili2text Bilibili视频转文字,一步到位,输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text Bili2text是一款专为B站视频设计的智能文字提取工具…...
小程序毕业设计springboot基于微信小程序的校园综合服务
前言 在现代校园生活节奏日益加快、师生需求愈发多元化的当下,Spring Boot 校园综合服务系统宛如一位万能助手,全方位覆盖校园学习、生活、社交等各个领域,依托 Spring Boot 强大的开发框架,将繁杂事务化繁为简,为校园…...
从HDLbits的Verification题目看起:新手写Verilog代码最容易踩的3个坑(附避坑指南)
从HDLbits的Verification题目看起:新手写Verilog代码最容易踩的3个坑(附避坑指南) 当你第一次在仿真器里看到波形图像脱缰野马一样乱窜时,那种头皮发麻的感觉我至今记忆犹新。Verilog看似简单的语法背后,藏着无数让初学…...
AgentCPM模型API接口设计规范与安全防护最佳实践
AgentCPM模型API接口设计规范与安全防护最佳实践 最近在帮几个团队把他们的AgentCPM模型从本地测试环境搬到线上,发现大家普遍有个误区:觉得模型能跑通、接口能调通,就算部署成功了。结果呢,没过多久就遇到了各种问题——有人恶意…...
Anno 1800模组加载器:从入门到精通的完整指南
Anno 1800模组加载器:从入门到精通的完整指南 【免费下载链接】anno1800-mod-loader The one and only mod loader for Anno 1800, supports loading of unpacked RDA files, XML merging and Python mods. 项目地址: https://gitcode.com/gh_mirrors/an/anno1800…...
Comsol模拟混凝土中水分传递 低气压下水分转移引起的水泥浆龄期微观结构变化 低气压(AP)...
Comsol模拟混凝土中水分传递 低气压下水分转移引起的水泥浆龄期微观结构变化 低气压(AP)会影响混凝土中的水分传递,进而影响其微观结构和体积特性,但对其热力学机制却知之甚少 可文献复现 水泥基材料内部的水分运动会直接改变孔隙…...
C++的std--ranges内存效率
C的std::ranges内存效率探析 在现代C编程中,std::ranges作为C20引入的重要特性,不仅简化了范围操作,还在内存效率方面展现出显著优势。对于需要高性能和低资源消耗的应用场景,理解std::ranges如何优化内存使用至关重要。本文将深…...
提升协作效率:开源实时协作Markdown工具全解析
提升协作效率:开源实时协作Markdown工具全解析 【免费下载链接】codimd CodiMD - Realtime collaborative markdown notes on all platforms. 项目地址: https://gitcode.com/gh_mirrors/co/codimd 在数字化协作日益频繁的今天,一款能够让团队成员…...
MinerU智能文档理解服务新手教程:5分钟搭建PDF解析系统
MinerU智能文档理解服务新手教程:5分钟搭建PDF解析系统 1. 引言:文档智能解析的实用价值 每天我们都会遇到各种PDF文档——合同、报告、论文、发票,手动提取内容不仅耗时还容易出错。MinerU智能文档理解服务正是为解决这个问题而设计&#…...
