序
在开发过程中,我们经常会遇到要加弹窗的需求,而如果当前页的展示数据一屏展示不完,则在打开弹窗后,有滑动操作时,页面也会随之滑动。那么如何处理这一问题呢?
常见问题
我们开发过程中,最常见的问题上文已叙述:打开弹窗后,有滑动操作时,页面也会随之滑动。问题示意图如下:
背景无法屏蔽弹窗.gif
最终效果
我们来看一波正确示范
可滑动弹窗.gif
解决方案
两种解决方案,针对两种不同情况:
弹框数据少,无需滑动
弹框内数据需要滑动展示
1. 无需滑动弹窗
a. 思路
思路:
vue自带修饰符可解决该问题—— @touchmove.prevent
此方案重点在将@touchmove.prevent绑定到弹窗模块,然后动态控制弹窗显示隐藏即可。
b. 效果
不可滑动弹窗.gif
c. 代码
弹窗1
- 这是第{ {item}}条背景数据