Taro next自定义遮罩如何防止击穿？

[fred8617]

问题描述

这样写完全没有效果

复现步骤

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */

期望行为

报错信息

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot[bot]]

CC @Chen-jj

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

不要截图，写代码，击穿的意思是冒泡吗，写上你能复现子组件父组件在一起代码，写上你想防止哪个组件哪个事件冒泡

[fred8617]

@yuche 不算击穿，可能描述有问题，就是一个全屏自定义弹出，有mask遮罩，但是背后mask下面的list还是可以滚动，已经设置z-index了 可以看到滚动条，背后列表还可以滚动

[taro-bot[bot]]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[yuche]

你是不是需要的是 CoverView： https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

[fupengl]

是不是catch:touchmove 就行了

[fred8617]

不太清楚，taro不支持catchtouchmove

[fred8617]

@yuche 请问next是如何使用catch事件的，调用stopPropagation还有preventDefault编译后的wxml上没有catch:事件

[yuche]

@yuche 请问next是如何使用catch事件的，调用stopPropagation还有preventDefault编译后的wxml上没有catch:事件

next 的事件是有自己的事件机制控制是否冒泡的，不用编译到 catch。调用 stopPropagation 函数就会防止冒泡。

[fred8617]

@yuche 看了下taro之前版本的taro-ui的modal是如何防止蒙板穿透的发现他编译后的wxml上是有catchtouchmove事件的，不知道我这个穿透是不是跟这个有关系，阻止冒泡和事件都调用了，但是page还是会滚动 `

`

[fupengl]

@yuche 请问next是如何使用catch事件的，调用stopPropagation还有preventDefault编译后的wxml上没有catch:事件

next 的事件是有自己的事件机制控制是否冒泡的，不用编译到 catch。调用 stopPropagation 函数就会防止冒泡。

在小程序上面调用是没有效果的，需要加catch才有用

[yuche]

<

你可以看看 taro ui v3 的代码，他编译之后是没有 catch 的，但依然能组织冒泡。 你可以做一个简单的 demo 提交到新的仓库复现下你的情况

[fred8617]

@yuche https://github.com/fred8617/taro-mask-issue 还是提供个链接吧，taro-ui v3在next下存在同样的问题，就是因为没有了catchtouchmove

[yuche]

@yuche fred8617/taro-mask-issue 还是提供个链接吧，taro-ui v3在next下存在同样的问题，就是因为没有了catchtouchmove

你不要用 taro-ui 做例子，就自己写一个最简单的复现，按照 issue 的要求提，我现在还是搞不明白你想要什么效果

[fred8617]

@yuche https://github.com/fred8617/taro-mask-issue提交了，自定义的modal

[yuche]

你可以自己给需要禁用滚动的组件写一个样式，类似于：

{
overflow：hidden;
height: 100vh;
}

如果打开 modal 就应用该样式，可以解决类似问题的样式还有很多种，你可以根据自己项目实际情况写。

使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

[fupengl]

你可以自己给需要禁用滚动的组件写一个样式，类似于：

{
overflow：hidden;
height: 100vh;
}

如果打开 modal 就应用该样式，类似的样式还有很多种，你可以根据自己项目实际情况写。

使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

这样也不太好，如果页面过长，设置这个会滚动到第顶部，也是有问题的。 昨天我也遇到类似问题，看了下源码，感觉也不太好改，不能兼容所有端，微信还支持catchtouchmove 不写方法也是可以catch

[fupengl]

你可以自己给需要禁用滚动的组件写一个样式，类似于：

{
overflow：hidden;
height: 100vh;
}

如果打开 modal 就应用该样式，类似的样式还有很多种，你可以根据自己项目实际情况写。

使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

一些弹窗，抽屉还是有很多场景需要这个属性的，能不能考虑只对微信做个支持

[fred8617]

你可以自己给需要禁用滚动的组件写一个样式，类似于：

{
overflow：hidden;
height: 100vh;
}

如果打开 modal 就应用该样式，可以解决类似问题的样式还有很多种，你可以根据自己项目实际情况写。

使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

这样那taro-ui的picker，drawer,actionsheet,modal,loading不都会出现这种情况

[taro-bot[bot]]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[yuche]

使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

那是 taro-ui 的问题了，你可以提 issue 让他改。

[fupengl]

使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

那是 taro-ui 的问题了，你可以提 issue 让他改。

小程序屏蔽滚动需要设置catch才能阻止事件。 用c3 的touch:action IOS端也是不支持的。 用上面你提出的方案是有体验问题。 这里要解决还是需要支持catch的事件处理才可以，现在next的实现该改起来是比较麻烦

[fred8617]

或者我希望可以在App层面使用通用的layout,自己可以用context打补丁

[dtdths]

或者我希望可以在App层面使用通用的layout,自己可以用context打补丁

老哥解决了没？我现在通过引入了原生组件包装了一下taro的遮罩层，暂时解决了，就是太费事了

[nanxiaobei]

catchtouchmove 不会支持吗？小程序的这个特性不太好替代。

[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

[transtone]

你可以自己给需要禁用滚动的组件写一个样式，类似于：

{
overflow：hidden;
height: 100vh;
}

如果打开 modal 就应用该样式，类似的样式还有很多种，你可以根据自己项目实际情况写。 使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

一些弹窗，抽屉还是有很多场景需要这个属性的，能不能考虑只对微信做个支持

如果用这个方式遇到页面显示效果问题，可以尝试给 body 加class

.at-frozen{
  position: fixed;
  width: 100%;
}

方案来源，taro-ui-vue3组件： https://b2nil.github.io/taro-ui-vue3-demo/#/action/modal

[JerryWen1994]

你可以自己给需要禁用滚动的组件写一个样式，类似于：

{
overflow：hidden;
height: 100vh;
}

如果打开 modal 就应用该样式，类似的样式还有很多种，你可以根据自己项目实际情况写。 使用 touchmove 的方法算是微信小程序特有的一种 hack，不能兼容给所有端，也不能兼容所有版本操作系统的小程序容器，我们不打算支持类似的做法。因此这个例子不能作为冒泡无效的复现。

一些弹窗，抽屉还是有很多场景需要这个属性的，能不能考虑只对微信做个支持

如果用这个方式遇到页面显示效果问题，可以尝试给 body 加class

.at-frozen{
  position: fixed;
  width: 100%;
}

方案来源，taro-ui-vue3组件： https://b2nil.github.io/taro-ui-vue3-demo/#/action/modal

这个会导致底部页面跳到顶部

[xty1992a]

那就再套个娃，娃给个marginTop -scrollTop

恢复滚动之后，延时一点点调pageScrollTo跳回去

<body :class="state.scrollEnable?'':'stop-scroll'">
  <div :style="{marginTop: state.scrollEnable: 0 : -state.pageScrollTop + 'px'}">
  <!-- content -->
  </div>
</body>

<script setup>

provide('pageContainer', {
  async stopScroll() {
    state.scrollTop = await getPageScroll()
    state.scrollEnable = false
  },
  async enableScroll() {
    state.scrollEnable = true
    await sleep(10)
    Taro.pageScrollTo({scrollTop: state.scrollTop, duration: 0})
  }
})

</script>

其实还是不完美 有两个问题 一个在背景拖动可能会触发页面的pullDownRefresh（如果允许） 一个恢复滚动时，页面会闪动

[zhanbo0523]

给View标签添加catchMove真机测试看，不要在开发者工具看 开发者工具没效果 `

`

[charsea]

支付宝加了catchMove还是没效果

[crazyair]

> 支付宝加了catchMove还是没效果

一样，不知道怎么解决

[779102260]

我找到个比较好的方法：给控制是否能滚动的盒子改为scroll-view，然后通过scroll-y/scroll-x手动控制是否可以滚动

[Zexoius]

// 假定你有这样一个 modal 控件
<View className='modal'>
  <View className='overlay' />
  // 核心，取消内容部分的 touch 事件，只在Taro@3.x 适用
  <View catchMove>{props.children}</View>
</View>

import { ScrollView } from '@tarojs/components'

<Modal>
  // 只有这一块内容需要滚动
  <ScrollView scrollY>
    // ... ... render
  </ScrollView>
</Modal>

Taro@3.3.1

微信小程序下正常运行，希望对大家有所帮助。