如何在vue中开启、禁止H5页面的上下拉动 |
您所在的位置：网站首页 › 禁止页面向上拖动出现灰色标志 › 如何在vue中开启、禁止H5页面的上下拉动 |
|
最近接到项目经理的一个需求，要求将h5页面生成图片，用户点击在屏幕的时候能够将图片保存到本地，所以就很机智的用了html2canvas这个插件。自以为很完美的实现了这个功能，结果测试小哥在页面加载的时候上下拉动了一下页面，绘制出来的图片面目全非。立马去百度了一下，原来html2canvas在获取到dom元素之后才开始渲染。因此在页面开始加载时候，禁止页面的上下拉动便可以让html2canvas安安静静的绘图了。好了，开始踩坑吧。。。 阻止H5页面的上下拉动 document.body.addEventListener('touchmove', e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) ,{passive: false}//当 passive: true，浏览器忽略 preventDefault()。 ); 开启H5页面的上下拉动好了，既然禁止是这段代码，那么开启上拉动自然就是 document.body.removeEventListener('touchmove', e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) ,{passive: false}//当 passive: true，浏览器忽略 preventDefault()。 );结果页面在加载的时候的确可以禁止上下拉动，But在页面加载之后，页面就再也不能上下拉动了。。。 为什么会出现这种情况呢？ 如果要移除事件句柄，addEventListener()的执行函数必须使用外部函数，如上实例所示 (myFunction)。匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。 开启，阻止H5页面的上下拉动的正确方式 // 禁止和开启上下滑动 function noUpOrDown (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, document.body.addEventListener('touchmove', noUpOrDown,{passive: false}); document.body.removeEventListener('touchmove',noUpOrDown,{passive: false}); 在vue中开启、禁止H5页面的上下拉动 // 禁止和开启上下滑动 noUpOrDown (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, noSlideUpOrDown(){ if(this.isShowProgress == true){ document.body.addEventListener('touchmove', this.noUpOrDown,{passive: false}); }else if(this.isShowProgress == false){ document.body.removeEventListener('touchmove', this.noUpOrDown,{passive: false}); } },其中isShowProgress用于判断html2canvas是否绘图完毕，踩坑完毕 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |