跳转至

ios滚动问题catchtouchmove

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

根元素加上catchtouchmove="return"就可以了（PS：对cover-view无效）。

在 uniapp 开发微信小程序 中，catchtouchmove 是一个用于 阻止触摸滑动事件向上冒泡 的事件修饰符，常用于实现“页面不能滚动”或“防止穿透滚动”的场景。

📌 基本用途

<view catchtouchmove>
  <!-- 内容 -->
</view>

这个写法的作用是：

✅ 阻止滑动穿透：当弹出一个弹窗（如遮罩层、弹出层）时，防止底层页面继续滚动。

🎯 实际场景示例

假设你有一个弹窗组件，想在弹窗显示的时候防止用户滑动背后的页面：

<view class="mask" v-if="showModal" catchtouchmove>
  <view class="modal">
    <text>我是弹窗</text>
  </view>
</view>
  • catchtouchmove 会拦截 touchmove 事件，防止事件向上冒泡；
  • 背后的页面不会再因为滑动事件滚动。

🔍 与 bindtouchmove 的区别

属性 作用
bindtouchmove 监听触摸滑动事件，不阻止冒泡
catchtouchmove 监听并阻止事件继续向上冒泡

✅ 典型应用场景

  1. 遮罩层阻止背景滚动
  2. 弹出层或模态框中的滑动操作只作用于当前区域
  3. 移动端侧滑菜单弹出后防止主体页面滚动

如果你在做弹窗、抽屉、遮罩等功能时，发现页面“滑穿了”——这时候就可以给容器加上 catchtouchmove。

参考