vue实现内容可滚动的弹窗效果

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码,供大家参考,具体内容如下

这是第一种实现方式

效果图:

vue实现内容可滚动的弹窗效果_第1张图片

弹窗代码:

Popup.vue





在Home.vue页面使用弹窗:


 

   

解决弹窗滚动,里面的body也跟着滚动问题

在main.js中

//弹出框禁止滑动
Vue.prototype.noScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false,{ passive: false })// 禁止页面滑动
}
 
//弹出框可以滑动
Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// 出现滚动条
  document.removeEventListener('touchmove', mo, false,{ passive: false })
}

在页面使用时:

//禁止主页面滑动
  this.noScroll()
//主页面可滑动
  this.canScroll()

//还要加上样式:
* {
  touch-action: pan-y;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的