微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

自定义弹窗

如图所示:

自定义弹窗内部有带滚动条的盒子区域

在这里插入图片描述

问题:

  • 在盒子上滑动,页面如果超出一屏的话,也会跟着一起上下滚动
    解决方案:给自定义弹窗 添加 catchtouchmove 事件,阻止冒泡即可
    在这里插入图片描述
    在这里插入图片描述
    网上不少人说什么 catchtouchmove="true" 这样,可以没问题,其实 catchtouchmove="任何内容" 都行,只要知道 catch***是阻止冒泡的即可,最好还是跟我一样使用一个空函数,不然你就乖乖的看调试工具的警告吧,反正不影响程序运行,随便

新问题:

  • 弹窗内部的滚动区域也无法滚动???
    原因:弹窗内部滚动区域使用的 view 添加的 overflow: auto;
    解决方案1:将弹窗内部的滚动区域换成 scroll-view 组件并添加 scroll-y 属性
    其他解决方案:模仿 scroll-view 组件改 view ,没空,还是方案1简单,暂时先不研究,待补充
    在这里插入图片描述

    在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值