vue滚动条禁止_vue弹窗屏蔽滑动的两种解决方案

序

在开发过程中，我们经常会遇到要加弹窗的需求，而如果当前页的展示数据一屏展示不完，则在打开弹窗后，有滑动操作时，页面也会随之滑动。那么如何处理这一问题呢？

常见问题

我们开发过程中，最常见的问题上文已叙述：打开弹窗后，有滑动操作时，页面也会随之滑动。问题示意图如下：

背景无法屏蔽弹窗.gif

最终效果

我们来看一波正确示范

可滑动弹窗.gif

解决方案

两种解决方案，针对两种不同情况：

弹框数据少，无需滑动

弹框内数据需要滑动展示

1. 无需滑动弹窗

a. 思路

思路：

vue自带修饰符可解决该问题—— @touchmove.prevent

此方案重点在将@touchmove.prevent绑定到弹窗模块，然后动态控制弹窗显示隐藏即可。

b. 效果

不可滑动弹窗.gif

c. 代码

弹窗1

• 这是第{ {item}}条背景数据