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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!-- 活动规则弹窗 -->
 <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//弹出框禁止滑动
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 })
}

1
2
3
4
5
6
7
8
9
//禁止主页面滑动
  this.noScroll()
//主页面可滑动
  this.canScroll()

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