vue解决弹出式口罩滑动穿透问题的方法

最近开发过程中出现了一些小问题(好像总是有那么多问题)，但是一直没有时间去优化解决。程序员不能被商业绑架。如果你有时间，你应该花一些时间在代码上。开始这次尝试。

[遇到的问题]

在可滑动列表页面上弹出全屏蒙版，蒙版是固定的，中间显示消息框。当用手滑动蒙版的空白处时，滑动事件会渗透到底部列表页，导致列表页滑动。

[有待实现的目标]

1.滑动面罩的空白空间不得被滑动事件穿透。

2.当掩码消息框中有很多消息时，让消息上下滑动。

实际要达到的效果如下：

[实施思路]

1.可以使用vue提供的@touchmove.prevent来防止滑动，但是这个方法也会禁止其中子div的滑动事件，这样会导致中间的文字无法滑动。如果没有中间滑动的要求，用@ touchmove.prevent实现是一个很好的方法。

2.蒙版图层设置为顶部固定悬浮，底部列表设置为溢出-y:隐藏；这样列表的内容不能滑动，但实际过程中没有效果，于是我想到继续追溯到列表的父div，为body和html标签设置相关样式，从而控制底部列表的滑动问题。

3.点击掩码空白处的事件，并点击中间文本中的事件，以防止事件冒泡导致其他错误。

[相关实施代码]

1.html代码相对简单，列表页面实现为循环；遮罩使用一个变量来控制其显示和隐藏。不过这里有几点需要注意： a .上面列表中的div动态绑定了noScroll类，用于在蒙版层显示消息时切换到相关的css样式；b .弹出的全屏蒙版添加了点击事件，使蒙版消失，但是这个方法@ click。stop=' messagetitleclick (num)'被添加到每一行显示的文本中。为什么要加？——是因为蒙版空白区域的click方法对整个蒙版都是有效的，在文本中加入这个方法可以屏蔽蒙版click方法的影响，即使在这个方法中什么都不做。代码如下：

！-list-Div : class=' { no scroll : is show popup } ' Div class=' item ' v-for=' num in 50 ' @ click=' item click(num)' Div style=' width :100% ' click item { { num } }/Div-mask-Div v v-if=' is show popup ' class=' popup ' @ click=' popuptpturkik()' Div class=' message ' p class=' message-title ' v-for=' num in 30stop=' messagetitleclick (num)'消息提示{{num}} /p /div /div2。动态绑定到整个列表的css如下

/*在显示当前遮罩时生效*/。no croll { overflow-y :隐藏；}3.动态绑定后。no滚动到列表的整个div，底部列表仍然可以滑动，因此考虑继续向上跟踪。使用手表监控口罩是否显示，显示时设置相应的身体风格；但是当面具消失后，身体风格就恢复了。但是在vue中如何操作body，虽然vue是数据驱动的，但是并不提倡直接操作Dom。但是目前我没有什么好的想法，直接操作Dom就可以了。如下所示：

watch : { isshopopup(newVal，oldVal) { if (newVal==true) {让csstr=' overflow-y :隐藏；' height : 100%；'；document . getelementsbytagname(' html ')[0]. style . CSS text=csstr；document . body . style . CSS text=CSSTr；} else { let csstr=' overflow-y : auto；' height: auto'；document . getelementsbytagname(' html ')[0]. style . CSS text=csstr；document . body . style . CSS text=CSSTr；}//需要下面两行代码，兼容不同的浏览器：document . body . scroll top=this . page scrolloffset；window.scroll(0，this . page scrolly offset)；} }[补充]

最好检查完整的演示代码，因为后续代码修复和补充了一些真机上的滑动问题，包括处理一些滚动条位置。

[演示地址]

手动将路线切换到/3是此页面的一个示例

https://github.com/LiJinShi/wechat_back_vue

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。