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

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码，供大家参考，具体内容如下
这是第一种实现方式
效果图：

文章图片

弹窗代码：
Popup.vue

.modal_con {width: 80%; height: 287px; background: #ffffff; overflow: hidden; margin: 0 auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; }.modal_content {height: 100%; background-color: #fff; }.modal-bg {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 999; }.modal-container {height: 78%; text-align: center; display: flex; flex-direction: column; overflow-y: scroll; /* ios需要下面这个属性 */-webkit-overflow-scrolling: touch; }.rules_txt {font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: justify; color: #666666; padding: 0 20px; margin-top: 8px; margin-bottom: 0; }.rules_txt:last-child {padding-bottom: 40px; }.modal-header {font-size: 17px; font-family: PingFang, PingFang-SC; font-weight: bold; text-align: center; color: #333333; margin: 0; padding-top: 20px; }.reward_title {font-size: 17px; font-family: PingFang, PingFang-SC; font-weight: bold; text-align: center; color: #333333; padding: 0; margin-top: 14px; margin-bottom: 6px; }.footer_rules {width: 100%; height: 22%; position: absolute; bottom: 0; }.tips {/* width: 100%; opacity: 0.6; height: 49px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #ffffff); text-align: center; line-height: 49px; font-size: 18px; */}.rules_button {width: 100%; background: #ffffff; padding-bottom: 20px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }.button {width: 90%; display: flex; justify-content: center; align-content: center; background: linear-gradient(270deg, #1283ff, #50a3ff); border-radius: 4px; text-align: center; margin: 0 auto; }.button_text {font-size: 15px; font-family: PingFang, PingFang-SC; font-weight: SC; color: #ffffff; display: flex; justify-content: center; align-content: center; margin: 0; padding: 12px 0; }.rules_con {padding-bottom: 80px; }

在Home.vue页面使用弹窗：

* {touch-action: pan-y; }

解决弹窗滚动，里面的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 })}

在页面使用时：