一、场景
在项目中经常遇到一个页面,如很长的详情页,长的列表页,在这种页面会弹出一个弹框层,如下图:
这个时候就会出现一个问题,当弹窗里面的内容过多,出现滚动条时,弹窗里面的滚动条滑动到了最底部,继续滑动页面,会带动下面的详情页或列表页的继续滑动,触摸没有滚动的区域会发现滚动可以穿透,会传递给下面的列表页或详情页
二、解决办法
网上搜索了一圈,试了一下,
- 监听弹框的状态变量,如果弹框展示,就给对应的列表页面,添加对应的样式
<View className="order_details" style={{
overflow: isShowPopup ? 'hidden' : '',
height: isShowPopup ? '100vh' : ''
}}
</View>
这样是弹窗弹出的时候,强制页面只有一屏,当列表页滑动到中间位置,打开弹框,列表页面就会回到顶部,位置都清零了
三、使用ScrollView
- 将包裹弹框的最外层元素改为
ScrollView
,当然这是使用的Taro
,其他框架对应 - 并且将该元素添加
onTouchMove={this.touchMove}
自定义函数
// 阻止滑动穿透
touchMove = (e) => {
e.stopPropagation()
}
测试
然后在开发者工具上测试,问题解决
真机上测试,问题解决