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

news2024/11/26 8:38:08
  1. 解决弹框滚动的时候,下层也会滚动问题=》阻止滚动穿透(react,vue)

案例描述:

页面展示时需要滚动条才可以显示完整,但是当我们显示弹框的时候,即使不需要滚动条,但是页面仍然可以滚动,并且下层内容会随着滚动变化。

阻止滚动穿透

Taro 3 的事件机制。因为事件都以 bind 的形式进行绑定,因此不能使用 e.stopPropagation() 阻止滚动穿透。

针对滚动穿透,目前总结了两种解决办法:

一、样式

使用样式解决:禁止被穿透的组件滚动。

这也是最推荐的做法。

二、catchMove

Taro 3.0.21 版本开始支持

但是地图组件本身就是可以滚动的,即使固定了它的宽高。所以第一种办法处理不了冒泡到地图组件上的滚动事件。

需要真机预览或者模拟查看,pc模拟器上看不出效果。

在需要的弹框scroll-view 外层加上下面的内容包裹scroll-view 使用后真机上将不会滚动下层内容

<View catchMove></View>

  1. 解决弹框内部再显示其余的弹框,父级高度的定位限制,(RootPortal

root-portal 使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

案例描述:

以我项目中为例,使用了taro-ui的‘AtFloatLayout’组件,

项目中当我使用'AtFloatLayout'显示购物车后,内部又嵌套了一个‘AtModal’来展示点击购物车内部商品时出现切换规格的弹框;

此时如果不作处理,AtModal的最大高度是AtFloatLayout的高度,如果AtFloatLayout比较低AtModal无法再整个页面中上下居中显示,且可能会显示不全。

例如此图:未添加root-portal 的情况

解决方案:

<AtFloatLayout>
    <RootPortal>
        <AtModal></AtModal>
    </RootPortal>
</AtFloatLayout>

成功后模拟器element显示


解决后显示上下居中 以窗口最大为父级

成功解决弹框内部再显示其余的弹框高度的问题

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

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

相关文章

MES助力灯具照明行业从制造到”智造”

现如今&#xff0c;LED照明行业产品更新换代太快&#xff0c;一个产品一两年不更新一下外观、材料&#xff0c;就会被对手超越。这直接导致LED产品标准化程度不够高&#xff0c;LED下游制造类厂家智能化生产程度普遍偏低。 加之大多属于劳动密集型产业&#xff0c;传统的依靠买…

Hive分区表与分桶表的使用具体说明

目录 一、分区表 (一)分区表基本语法 1.创建分区表 2.往分区表中写入数据的两种方法 (1)load装载本地数据 (2)insert...select...(常用) 3.读取分区表数据 4. Hive分区表的存储路径规划&#xff1a;分区字段分区值 5.分区表基本操作 (1)查看所有分区信息 (2)新增分区…

C#使用MQTT通信 .Net实现MQTT通信 java使用MQTT通信 java实现MQTT通信

MQTT是一种轻量级、基于发布/订阅模式的通信协议&#xff0c;通常用于物联网设备间的通信。MQTT协议采用简单的二进制消息格式&#xff0c;能够在不占用过多网络带宽的情况下进行高效的通信。以下是使用MQTT进行通信的一些基本概念&#xff1a;BrokerMQTT通信中的中间件&#x…

机器学习算法: AdaBoost 详解

1. 集成学习概述 1.1. 定义 集成学习&#xff08;Ensemble learning&#xff09;就是将若干个弱分类器通过一定的策略组合之后产生一个强分类器。 弱分类器&#xff08;Weak Classifier&#xff09;指的就是那些分类准确率只比随机猜测略好一点的分类器&#xff0c;而强分类器&…

住宅防雷接地的选择要求和施工方法

在您家的布线系统中&#xff0c;防雷接地系统是一项至关重要的安全功能。如果系统发生某种故障&#xff0c;接地系统提供电阻最小的路径&#xff0c;确保电流安全地流回大地本身。因此&#xff0c;它减少了短路导致火灾或危及生命的电击的可能性。家庭接地系统的最后一个也是最…

成都的Java培训机构有哪些?

强烈自荐 二十三年教学实力积累 "课工场是专注互联网教育的生态平台&#xff0c;汇聚中国和北美数百位来自互联网企业的行业大咖&#xff0c;向寻求技术提升和想进入IT行业的人群提供直播、录播、线下面授等多模式教学服务&#xff0c;并通过全国线下服务中心提供更加成熟…

【JVM】内存结构

【JVM】内存结构 文章目录【JVM】内存结构1. 程序计数器1.1 定义1.2 作用2. 虚拟机栈2.1 定义2.2 栈内存溢出2.3 线程运行诊断3. 本地方法栈4. 堆4.1 定义4.2 堆内存溢出4.3 堆内存诊断5. 方法区5.1 定义5.2 组成5.3 方法区内存溢出5.4 运行时常量池5.5 StringTable特性1. 程序…

Hadoop集群模式安装(Cluster mode)

1、Hadoop源码编译 安装包、源码包下载地址 Index of /dist/hadoop/common/hadoop-3.3.0为什么要重新编译Hadoop源码? 匹配不同操作系统本地库环境&#xff0c;Hadoop某些操作比如压缩、IO需要调用系统本地库&#xff08;*.so|*.dll&#xff09; 修改源码、重构源码 如何…

电子墨水屏的应用场景

电子纸挺好个东西&#xff0c;大家都把注意力集中在商超场景&#xff0c;其实还有更多有趣的场景方案可用&#xff0c;价值也不小&#xff0c;比如&#xff1a; 仓库场景&#xff1a;通过亮灯拣选&#xff0c;提高仓库作业效率。 仓库循环使用标签&#xff1a;做NFC类发卡式应…

CnOpenData专精特新“小巨人”企业工商注册基本信息数据

一、数据简介 “专精特新”一词最早来源于2011年7月&#xff0c;由时任工信部总工程师朱宏任在《中国产业发展和产业政策报告&#xff08;2011&#xff09;》新闻发布会上首次提出。“专精特新”是指具备专业化、精细化、特色化、创新型四大优势的企业。根据工信部的定义&#…

content-type几种常见类型区别

Content-Type叫做MIME&#xff08;mediaType&#xff09;类型,使用Content-Type来表示请求和响应中的媒体类型信息。如果是请求头&#xff0c;它用来告诉服务端如何处理请求的数据&#xff0c;如果是响应头&#xff0c;它用来告诉客户端&#xff08;一般是浏览器&#xff09;如…

numpy的常见数据类型

常见数据类型介绍Python 原生的数据类型相对较少&#xff0c; bool、int、float、str等。这在不需要关心数据在计算机中表示的所有方式的应用中是方便的。然而&#xff0c;对于科学计算&#xff0c;通常需要更多的控制。为了加以区分 numpy 在这些类型名称末尾都加了“_”。类型…

【ESP32+freeRTOS学习笔记-(九)事件组】

目录1、概述2、事件组的特性2.1 事件组、事件标志和事件位2.2 事件组位长的设置2.3 多任务访问3、使用事件组管理事件3.1 xEventGroupCreate()3.2 xEventGroupSetBits()3.3 xEventGroupGetBits()3.4 xEventGroupWaitBits()3.5 示例4、使用事件组同步任务4.1 xEventGroupSync()4…

MobaXterm安装与使用

MobaXterm安装与使用 我们首先进入MobaXterm官网&#xff0c;其提供了收费版和免费版&#xff0c;我们使用免费版即可 随后便是安装过程了&#xff0c;很简单。解压后运行该文件一路next即可。 安装完成后我们便可以使用了点击session 选择SSH连接方式&#xff0c;输入服务器…

vue项目——获取指定日期是周几和第几周的信息——表格展示

最近在写后台管理系统&#xff0c;遇到以下的要求&#xff0c;就是要展示 年月日和周几和第几周的情况。 下面记录一下用到的函数&#xff1a; 1.跟据日期获取第几周 //根据日期获取第几周 getWeek(dateTime) {let temptTime new Date(dateTime);//周几let weekday temptT…

浏览器用一行JS代码导出cookies.txt,Python的requests库导入cookies格式化为字典格式

在Python进行爬虫时&#xff0c;如果仅使用requests库打开某个网页&#xff0c;requests的session.cookies保存的cookies信息少得可怜&#xff0c;有时cookies甚至是空白&#xff01;但浏览器里打开同一个网页&#xff0c;cookies信息非常详尽&#xff0c;比如浏览器的cookies保…

2023-02-22 学习记录--TS-邂逅TS(二)

TS-邂逅TS&#xff08;二&#xff09; 不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无以成江海。&#x1f4aa;&#x1f3fb; 一、接口&#xff08;interface&#xff09; 在 ts 中&#xff0c;子类只能继承一个父类&#xff0c;不可多继承&#xff0c;但是…

2020蓝桥杯真题单词分析 C语言/C++

题目描述 小蓝正在学习一门神奇的语言&#xff0c;这门语言中的单词都是由小写英文字母组 成&#xff0c;有些单词很长&#xff0c;远远超过正常英文单词的长度。小蓝学了很长时间也记不住一些单词&#xff0c;他准备不再完全记忆这些单词&#xff0c;而是根据单词中哪个字母出…

恭喜!龙蜥社区荣登 2022 科创中国“开源创新榜”

2 月 20 日&#xff0c;中国科协召开以“创新提振发展信心&#xff0c;科技激发产业活力”为主题的2023“科创中国”年度会议。会上&#xff0c;“科创中国”联合体理事长、中国工程院院士周济介绍了 2022 年系列榜单征集遴选情况&#xff0c;并与中国科协副主席、中国工程院院…

音箱上8键触摸芯片绿芯GTC08L完美替换启攀微

由工采网代理提供的韩国GreenChip电容式触摸芯片-GTC08L是GreenTouch5CTM电容式触摸传感器系列之一&#xff1b;可以在发动机运行下进行8通道电容传感&#xff1b;对电磁兼容、电磁干扰、温湿度变化、电压干扰、温度漂移、湿度漂移等都有较强的抗干扰能力。不会对CS, RS,EFT&am…