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

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

前面拨打电话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属性,要到真机上才会有效果,真机!真机!真机!!!。开发者工具会有问题

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

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值