小程序catchtouchmove="true" 事件导致页面不能滚动

https://developers.weixin.qq.com/community/develop/doc/000aacfbac8e002f14e6451915b400

弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动,但是如果弹窗元素设置了该属性,弹窗内的自己写的overflow:auto就会失效,这时不能用自己写的overflow,要改用scroll-view组件,就可以解决该问题。

catchtouchmove相当于preventDefault,阻止默认行为即阻止滚动事件,
类似js中的onContextMenu={e => e.preventDefault()}阻止右键默认事件,右键默认是会弹出菜单的。
小程序中没有类似的catchtap=true,tap是小程序的内部事件,目前只要用到catchtouchmove=true,可能会有catchtouchstart=true阻止touchstart默认行为。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: catchtouchmove="true"是指在移动端浏览器中禁止滑动事件的默认行为,即阻止页面滚动。这个属性通常用于解决某些特定的交互场景,比如在一个弹出层中滑动某个元素时,希望禁止页面背景滚动的情况。它可以在HTML标签中使用,也可以在JavaScript中通过监听事件并调用preventDefault()方法实现。 ### 回答2: catchtouchmove="true"的作用是在小程序中阻止滚动页面的默认行为。当我们设置catchtouchmove="true"时,表示在触摸滚动页面时,阻止页面的默认滚动行为,这样就可以自定义处理滑动事件。 通常情况下,在小程序中滑动页面会触发页面的默认滚动行为,即滚动页面内容,当我们希望在某些特定情况下,滑动页面时不触发默认滚动行为,而是自定义处理滑动事件时,就可以使用catchtouchmove="true"。 举个例子,假设我们在小程序中有一个需要自定义滑动效果的组件,例如轮播图组件,我们希望用户滑动轮播图时不会触发页面的默认滚动行为,而是在组件内部进行滑动处理,这时可以在轮播图组件的标签上加上catchtouchmove="true",这样用户在滑动轮播图时,就不会触发页面滚动了,而是触发轮播图组件的滑动事件。 总结而言,catchtouchmove="true"的作用就是阻止页面滚动的默认行为,使得我们可以自定义处理滑动事件,使页面的滑动行为更加灵活多样。 ### 回答3: catchtouchmove="true"是小程序中给某一个组件添加的属性,它的作用是阻止当前组件的touchmove事件冒泡到父组件或祖先组件。当一个页面上有多个可以滚动的组件(如scroll-view、swiper等)并且它们嵌套在一起时,如果不设置catchtouchmove="true",当滑动一个组件时,可能会触发整个页面滚动导致无法正确地滚动当前组件。 使用catchtouchmove="true"可以避免这种情况的发生,即使当前组件内部有滑动操作,也不会对其他组件产生影响。这样就能够保证每个组件都能够独立地进行滚动操作,使用户能够更加方便地操作小程序页面。 总之,catchtouchmove="true"的作用是阻止touchmove事件的冒泡,确保当前组件的滑动操作不会干扰其他组件的滚动

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值