Vue出现弹出层时禁止底部页面跟随滑动
更新时间：2022年07月29日 16:18:16 作者：wh_xmy
本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmove.prevent方法来解决，但是我试了没起作用，或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式，仅供参考：
1.在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下：
methods : {
//禁止滚动
stopScroll(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滑动限制***/
canScroll(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);
}
}2.在全局js即main.js中，设置全局函数，在使用到的页面分别调用即可，代码如下：
//弹出框禁止滑动
Vue.prototype.stopScroll = function () {
var mo = function (e) { e.preventDefault() }
document.body.style.overflow = 'hidden'
document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}
//弹出框可以滑动
Vue.prototype.canScroll = function () {
var mo = function (e) {
e.preventDefault()
}
document.body.style.overflow = ''// 出现滚动条
document.removeEventListener('touchmove', mo, false)
}具体页面的调用方法如下：
//当需要禁止弹出框底部内容滑动时调用： this.stopScroll() //当需要页面恢复滑动功能时调用： this.canScroll()
注：以上方法适用于vue项目的移动端，如果是PC，等我写到继续完善。
到此这篇关于Vue出现弹出层时禁止底部页面跟随滑动的文章就介绍到这了,更多相关Vue 弹出层禁止底部滑动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
vue使用JSON编辑器:vue-json-editor详解
文章介绍了如何在Vue项目中使用JSON编辑器插件`vue-json-editor`,包括安装、引入、注册和使用示例,通过这些步骤,用户可以在Vue应用中轻松实现JSON数据的编辑功能,文章最后呼吁大家支持脚本之家2025-01-01
vue2 前后端分离项目ajax跨域session问题解决方法
本篇文章主要介绍了vue2 前后端分离项目ajax跨域session问题解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
在 Vue 3 项目中,我们有时需要根据路由的 meta 信息来动态决定是否使用 KeepAlive 组件,以控制组件的缓存行为,所以本文给大家介绍了Vue3动态使用KeepAlive组件的实现步骤,通过代码示例讲解的非常详细,需要的朋友可以参考下2024-11-11
这篇文章主要给大家介绍了关于eslint常见的一些报错及解决方法,解决eslint的报错问题可以要根据报错行数快速定位.文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢？下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法，一起看看吧2018-11-11
vue中v-for和v-if一起使用之使用compute的示例代码
这篇文章主要介绍了vue中v-for和v-if一起使用之使用compute的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue项目中定义全局变量、函数的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue对象的基本组成和Vue对象挂载的几种方式,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了在vue项目中使用sass的配置方法,需要的朋友可以参考下2018-03-03
本文主要介绍了iview 权限管理，iview-admin2.0自带权限管理。可以通过设置路由的meta对象的参数access来分配权限。感兴趣的可以了解一下2021-07-07
最新评论