Taro3.0 vue2 自定义遮罩view节点无法阻止touchmove事件冒泡

[martSforever]

相关平台

微信小程序

复现仓库

https://gitee.com/martsforever-issues/taro-issues-catch.git
小程序基础库: 2.12.0
使用框架: Vue2.0

复现步骤

1. 安装依赖；
2. 启动小程序：npm run dev:weapp；
3. 使用微信开发者工具打开dist文件夹；
4. 打开的首页就是示例，该页面代码为：src/pages/index/index.vue
5. 该页面末尾自定义了一个view.mask-container 节点，这个view为自定义的遮罩，通过 @touchmove 监听了 touchmove 事件，然后在事件处理函数中调用了 e.stopPropagation()。希望能够阻止滚动穿透，但是实际上没有效果；

期望结果

1. 在 view.mask-container 遮罩节点上滚动时，阻止页面（page）滚动。
2. 将 @touchmove.catch 编译为 catchtouchmove，或者判断 @touchmove 的处理函数中是否调用了 e.stopPropagation，是则编译为 catchtouchmove，或者提供其他方式监听 catchtouchmove 事件，以便阻止touchmove滚动穿透。

实际结果

在 view.mask-container 遮罩节点上滚动时，page里面的内容也一并滚动了。

环境信息

👽 Taro v3.0.2


  Taro CLI 3.0.2 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 10.16.3 - D:\0_install\nodejs\node.EXE
      Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.9.0 - D:\0_install\nodejs\npm.CMD

[ynqq]

老哥解决了没

[martSforever]

老哥解决了没

没有，等官方答复呢

[ynqq]

老哥解决了没

没有，等官方答复呢

我发现可以使用vant的overlay来防止穿透

[martSforever]

老哥解决了没

没有，等官方答复呢

我发现可以使用vant的overlay来防止穿透

你说的这个我早就想到了，用微信自定义组件做这个catchtouchmove的事情，问题是taro不支持全局注册微信自定义组件，意味着你那个页面用到弹框组件，那么你那个页面就得在页面配置文件里边注册这个微信自定义组件。不是一劳永逸的办法

[Chen-jj]

#5984

[Chen-jj]

https://docs.taro.zone/docs/next/react#%E9%98%BB%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F