Taro 小程序做蒙层,蒙层下页面会滚动。滚动穿透问题

本文档描述了在开发小程序时遇到的一个问题,即在弹出蒙层并尝试拨打手机号时,背景页面仍然可以滚动。作者首先尝试调整层级解决,未果后查阅文档,发现可通过设置`catchtouchmove`属性阻止页面滚动。在Taro 2项目中,使用`catchtouchmove`属性,并在真机上测试才可见效。作者提供了相关代码示例,强调了在开发者工具中可能无法正确显示此效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在写小程序的时候,需要手写一个拨打打电话的功能,点击查看弹出蒙层展示手机号,点击电话号码进行拨打电话。

前面拨打电话API都挺顺利,后来忽然发现蒙层下的页面依然还能滚动。一开始以为层级问题,调整层级一直没什么效果。

于是开始查文档,发现文档中提示
在这里插入图片描述
于是开始一个个方法进行测试。第一种方法不适合,因为当前页面滚动元素没办法给到高度,会有问题,就不细说了。

开始第二种办法,我的项目还是使用Taro.2,所以使用catchtouchmove属性,如果为Trao3,可使用catchMove属性。

<View className='phone' catchtouchmove='filterViewMove'>
		<View className='phoneContent' style={{ display: phonoSwitch ? 'block' : 'none' }}>
			<View className='phoneNumber'></View>
			<View className='phoneCancel' onClick={this.phoneClick.bind(this, false)}>取消</View>
		</View>
</View>

注:catchtouchmove='filterViewMove’为了防止控制台警告也可以直接写catchtouchmove
注:因为使用了catchtouchmove属性,要到真机上才会有效果,真机!真机!真机!!!。开发者工具会有问题

效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值