首页 > 其他分享 >解决Taro3.x框架Modal蒙层穿透问题

解决Taro3.x框架Modal蒙层穿透问题

时间:2023-09-14 17:44:49浏览次数:44  
标签:滚动 Taro3 框架 蒙层 Modal Taro 21

在使用 Taro 框架开发小程序时,我们可能会遇到一个常见问题,即 Modal 蒙层默认情况下是可以滚动的,导致在 Modal 弹出时用户仍然可以滚动页面,造成用户体验上的不便。本文将介绍一种解决方法,以防止 Modal 蒙层的穿透问题。

1. 问题分析

在 Taro 框架中,我们可以通过 @tarojs/components 包提供的 AtModal 组件来创建 Modal 弹窗。该组件允许用户点击蒙层来关闭弹窗,但默认情况下,蒙层是可以滚动的,从而导致在弹窗显示时仍然可以滚动页面。

2. 解决方法

2.1. 在Modal根元素View上绑定属性 catchMove,注意这个属性只有 Taro 3.0.21 才开始支持,测试时请使用真机预览查看。

<View className={rootClass} catchMove>
    <View onClick={this.handleClickOverlay} className='at-modal__overlay'>
      <View className='at-modal__container'>
      ......
      </View>
    </View>
</View>

兼容性:

  • Taro 3.0.21才支持
  • 你的项目框架大于Taro 3.0.21,可以优先使用此方案

2.2. 网上很多人说的设置定位fixed+记录滚动位置,当然也可以解决,且无taro版本兼容问题,如有需要请移步这里:禁止被穿透的组件滚动

标签:滚动,Taro3,框架,蒙层,Modal,Taro,21
From: https://www.cnblogs.com/qingfengweb/p/17702952.html

相关文章

  • window.showModalDialog与window.open全屏显示
    搞了半天就是搞不出模式对话框的全屏显示,原来其与window.open的参数设置完全不同.functionwinModalFullScreen(strURL){varsheight=screen.height-70;varswidth=screen.width-10;varwinoption="dialogHeight:"+sheight+"px;dialogWidth:"+swidth+"px;status:ye......
  • ios中隐藏导航栏后,modal时出现白色闪动
    从无导航页面导航进到下级页面,导航栏一闪而过,也很简单,再在压栈控制器里面再坐下处理,代码如下:-(void)viewWillDisappear:(BOOL)animated{[superviewWillDisappear:animated];if(self.parentViewController.childViewControllers.count>0){[self.navigati......
  • 微信小程序11 弹窗showToast,showLoading,showModal
    弹窗是相当常用的功能,在微信里用弹窗还是挺方便的。不同于我们写网页时,对于alert,confirm这些比较简陋的原生弹窗通常要引入第三方插件来美化,微信自带的弹窗效果还不错。放一个按钮,绑定showToast方法。<buttonbind:tap="showToast">点击弹窗1</button>Js方法通用showToast......
  • Multi-Modal Attention Network Learning for Semantic Source Code Retrieval 解读
    Multi-ModalAttentionNetworkLearningfor SemanticSourceCodeRetrieva Multi-ModalAttentionNetworkLearningfor SemanticSourceCodeRetrieval,题目意思是用于语义源代码检索的多模态注意网络学习,2019年发表于ASE的##研究什么东西Background:研究代码检索技......
  • 手机直播源码,设置透明背景(去掉蒙层)状态栏颜色不改变
    手机直播源码,设置透明背景(去掉蒙层)状态栏颜色不改变Dialog设置透明背景(去掉蒙层) //背景全透明window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))window!!.setDimAmount(0f)   ​     Dialog弹出时状态栏颜色不改变 //弹出时状态栏颜色不......
  • 什么是 bootstrap ngb modal window?
    Bootstrap是一个流行的开源前端框架,用于构建响应式和移动优先的网站和应用程序。它提供了一套丰富的CSS样式和JavaScript组件,以简化Web开发过程。其中之一是BootstrapModal,它是一个用于创建模态框(Modal)窗口的组件。而"ngb"是指的AngularBootstrap,是将Bootstrap组件集成到......
  • taro使用taro3-echarts-react报错,图表不出来
    问题taro版本3.6.2taro3-echarts-react版本1.0.4在taro小程序开发中,使用taro3-echarts-react时,echarts版本需要选择4.9.0,但是我们往往需要使用高版本的echarts,但是引入echarts.js文件后,控制台报错:el.addEventListenerisnotafunction或者t.addEventListenerisnotaf......
  • 直播系统搭建,编辑下拉框、日期时,会层级不够有遮蒙层问题
    直播系统搭建,编辑下拉框、日期时,会层级不够有遮蒙层问题加样式代码如下(示例):  下拉框的样式: .vxe-select--panel{  z-index:9997!important; }​日期的样式: .vxe-input--panel.type--date,.vxe-input--panel.type--month,.vxe-input--panel.type--week,.vx......
  • v-bind和v-modal的区别
    1、v-bind(1)v-bind是单向数据绑定,用来绑定数据和属性以及表达式,数据只能从data流向页面;(2)v-bind的缩写是“:”,也就是v-bind:id等价于:id(3)适用于class、style、value2、v-model(1)v-modal是双向数据绑定,用在表单控件上,用于实现双向数据绑定(放在表单之外的标签上是没有效果的)(2)适......
  • delphi cannot make a visible window modal报错的解决过程
    抛出问题: 排除过程:1.在TFrmChangePW窗口的create事件里打断点,结果发现,根本没停顿,所以判断问题不在TFrmChangePW窗体里,而是showmodal这语句里出了问题,点中断,跳到抛出错误的地方:2.if里的四个条件,检查了第一个,第二个和第四个都是没问题的,第三个(fsModalinFFormS......