vue 在弹框中滑动会透传到下面的页面解决办法

liuye066

于 2021-05-27 17:23:09 发布

阅读量1.6k

点赞数 3

分类专栏： H5 混合开发文章标签： vue js javascript

本文链接：https://blog.csdn.net/liuye066/article/details/117333405

版权

在Vue项目中，当弹框打开时，页面跟随滚动可能会带来不便。本文提供了两种解决方法：一是通过在main.js中定义函数来禁止和允许页面滚动，并在弹框操作时调用；二是直接在弹框或遮罩层的div上添加`@touchmove.prevent`阻止滑动。这两种方法都能有效防止弹框打开时下层页面的滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE中，在一个页面打开弹框，在弹框中上下滑动，下方页面会跟着滑动。

解决办法有2种，第2种方法比较简单

方法一：

在main.js中加入代码：

//弹出框禁止滑动
Vue.prototype.noScroll = 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.noScroll()

关闭弹框时，调用：

this.canScroll()

完整代码：

在弹框之前，禁止页面滑动：

      //禁止下层页面滑动
      this.noScroll()
      this.$refs.listDialog.show(this.showList, '能量列表', {
        type: 'alert',

最低0.47元/天解锁文章