如何在vue中开启、禁止H5页面的上下拉动

Posted 2023-04-18

参考技术A 最近接到项目经理的一个需求，要求将h5页面生成图片，用户点击在屏幕的时候能够将图片保存到本地，所以就很机智的用了html2canvas这个插件。自以为很完美的实现了这个功能，结果测试小哥在页面加载的时候上下拉动了一下页面，绘制出来的图片面目全非。立马去百度了一下，原来html2canvas在获取到dom元素之后才开始渲染。因此在页面开始加载时候，禁止页面的上下拉动便可以让html2canvas安安静静的绘图了。好了，开始踩坑吧。。。

下拉菜单禁止页面滑动

参考技术A 1.vant框架的van-popup会在body里添加一个class=“van-overflow-hidden”，这个就是禁止滑动，使用了overflow: hidden !important;
2.网页上在body设置overflow: hidden；跟vant里面的van-popup是一个意思；
3.如果你页面往下滑动页面，弹出van-popup，页面会抖动一下，不知道你们发现这个问题了没？
4.如果不想出现这样的问题的话，我还可以使用的事件的监听

5.当下拉菜单收起来了，就要把事件监听给移除