解决Taro3.x框架Modal蒙层穿透问题
发布时间 2023-09-14 17:40:38作者: 清风丶徐来
在使用 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版本兼容问题，如有需要请移步这里：禁止被穿透的组件滚动