🌟vue 移动端弹窗后禁止页面滚动 touchmove.prevent🌟

在开发移动端 Vue 项目时，经常会遇到这样一个场景：当用户打开一个弹窗（如提示框、选择器等）时，背景页面的滚动会干扰用户的操作体验。这时，就需要通过 `touchmove.prevent` 来阻止页面滚动，提升交互友好度。

首先，在弹窗展示时，我们需要监听 `touchmove` 事件，并添加 `preventDefault()` 方法。例如：

```javascript

document.addEventListener('touchmove', (e) => {

e.preventDefault(); // 禁止默认滚动行为

}, { passive: false });

```

但需注意，使用 `passive: false` 是为了确保 `preventDefault()` 能生效，否则浏览器可能会忽略此设置。此外，当关闭弹窗时，记得移除该事件监听，避免影响其他功能：

```javascript

document.removeEventListener('touchmove', handleTouchMove);

```

这样做不仅优化了用户体验，还让页面逻辑更加清晰流畅。💡 让每一次交互都顺滑自然，是每个开发者追求的目标！✨

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！