How to realize the effect of scrollable pop-up window with vue

This article mainly explains "how to use vue to achieve content scrollable pop-up effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use vue to achieve content scrollable pop-up effect" bar!

This article is an example to share the specific code of scrollable pop-up window effect of vue implementation content for your reference, the specific content is as follows

This is the first way to implement it.

Effect picture:

Pop-up code:

Popup.vue

{{dataList.title}}

{{item}}

I see

Export default {name: 'Popup', props: {show: {type: Boolean, default: false},}, data () {return {dataList: {rules: [' 1. This is the first piece of data. This is the second piece of data. This is the third piece of data. This is the fourth piece of data, reward: ['1. The first data of the activity rule','2. The second data of the activity rule','2. Activity rule third data']}}, methods: {closeModal () {this.$emit ('closeModal')},}}. 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 requires the following attribute * /-webkit-overflow-scrolling: touch;}. Rules_txt {font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: justify; color: # 666666; padding: 020px; 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;}

Use pop-up windows on the Home.vue page:

Click the pop-up window import Popup from'. / Popup'export default {name: "Home", components: {Popup}, data () {return {isRulesShow:flase}} Watch: {isRulesShow (v) {if (v) {/ / disable main page sliding method in main.js this.noScroll ()} else {/ / main page slidable this.canScroll ()},}, methods: {/ / active rule pop-up window clickPopup () {this.isRulesShow = true} } * {touch-action: pan-y }

Solve the scrolling problem of the pop-up window, and the body in it also follows the scrolling problem.

In main.js

/ / the pop-up box forbids sliding Vue.prototype.noScroll = function () {var mo = function (e) {e.preventDefault ()} document.body.style.overflow = 'hidden' document.addEventListener (' touchmove', mo, false) {passive: false}) / / disable page sliding} / / pop-up box can slide Vue.prototype.canScroll = function () {var mo = function (e) {e.preventDefault ()} document.body.style.overflow =''/ / scroll bar document.removeEventListener ('touchmove', mo, false, {passive: false})}

When using the page:

/ / prevent the main page from sliding this.noScroll () / / the main page can slide this.canScroll () / / add a style: * {touch-action: pan-y Thank you for your reading, the above is the content of "how to use vue to achieve content scrollable pop-up effect". After the study of this article, I believe you have a deeper understanding of how to use vue to achieve content scrollable pop-up effect, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!