怎么用vue實現內容可滾動的彈窗效果

這篇文章主要講解了“怎么用vue實現內容可滾動的彈窗效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用vue實現內容可滾動的彈窗效果”吧！

本文實例為大家分享了vue實現內容可滾動的彈窗效果具體代碼，供大家參考，具體內容如下

這是第一種實現方式

效果圖：

彈窗代碼：

Popup.vue

<template lang="html">
    <div v-if="show" class="modal-bg" @click="closeModal">
      <div class="modal_con">
        <div class="modal_content">
          <div class="modal-container">
            <div class="modal_main">
              <p class="modal-header">{{dataList.title}}</p>
              <div class="rules_text">
                <p
                  v-for="(item, index) in dataList.rules"
                  class="rules_txt"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
          </div>
        </div>
          <div class="footer_rules">
            <div class="tips"></div>
              <div class="rules_button">
                <div class="button" @click="closeModal">
                  <p class="button_text">我知道了</p>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dataList: {
        rules: [
          '1.這是第一條數據啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
          '2.這是第二條數據啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
          '3.這是第三條數據啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
          '4.這是第四條數據啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
        ],
        reward: [
          '1.活動規則第一條數據數據數據數據',
          '2.活動規則第二條數據數據數據',
          '2.活動規則第三條數據數據數據'
        ]

      }
    }
  },
  methods: {
    closeModal () {
      this.$emit('closeModal')
    },
  }
}
</script>

<style lang="css" scoped>
.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;
}
</style>

在Home.vue頁面使用彈窗：

<!-- 活動規則彈窗 -->
 <template>
<div>
 <div  @click="clickPopup">
            <span>點擊彈出彈窗</span>
          </div>
 <Popup
      v-show="isRulesShow"
      @closeModal="isRulesShow = false"
      :show="isRulesShow"
    >
    </Popup>
</div>
</template>
<script>
import Popup from './Popup'
export default {
name:"Home",
components: {
 Popup
},
data () {
    return {
      isRulesShow:flase
      }
    },
    watch: {
    isRulesShow (v) {
      if (v) {
        //禁止主頁面滑動方法在main.js
        this.noScroll()
      } else {
        //主頁面可滑動
        this.canScroll()
      }
    },
  },
   methods:{
 //活動規則彈窗
    clickPopup () {
      this.isRulesShow = true
    },
 }
}
</script>
   <style lang="scss" scoped>
* {
  touch-action: pan-y;
}
</style>

解決彈窗滾動，里面的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;
}

感謝各位的閱讀，以上就是“怎么用vue實現內容可滾動的彈窗效果”的內容了，經過本文的學習后，相信大家對怎么用vue實現內容可滾動的彈窗效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！