序
??在開發過程中，我們經常會遇到要加彈窗的需求，而如果當前頁的展示數據一屏展示不完，則在打開彈窗后，有滑動操作時，頁面也會隨之滑動。那么如何處理這一問題呢？
常見問題
??我們開發過程中，最常見的問題上文已敘述：打開彈窗后，有滑動操作時，頁面也會隨之滑動。問題示意圖如下：
背景無法屏蔽彈窗.gif
最終效果
我們來看一波正確示范
可滑動彈窗.gif
解決方案
??兩種解決方案，針對兩種不同情況：
- 彈框數據少，無需滑動
- 彈框內數據需要滑動展示
1. 無需滑動彈窗
a. 思路
思路：
vue自帶修飾符可解決該問題——@touchmove.prevent
此方案重點在將@touchmove.prevent綁定到彈窗模塊，然后動態控制彈窗顯示隱藏即可。
b. 效果
不可滑動彈窗.gif
c. 代碼
<template>
<div class="modalTest">
<!-- 按鈕組 -->
<div class="btn">
<el-button type="success" size="small" @click="modalSign1 = true">彈窗1</el-button>
</div>
<!-- 背景數據 -->
<div class="listBG">
<ul>
<li v-for="item in 50">這是第{{item}}條背景數據</li>
</ul>
</div>
<!-- 彈框1 -->
<div class="modalBox" v-if="modalSign1" @touchmove.prevent @click.self="modalSign1 = false">
<div class="modal">
<ul>
<li v-for="item in 8">這是第{{item}}條數據</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalSign1: false, // 彈窗是否打開
}
}
}
</script>
2. 彈框內數據需要滑動展示
a. 思路
??首先，我們使用正常的vue操作，比如剛才的修飾符/語法糖進行操作時，雖然可以屏蔽掉背景數據滑動，但是該事件同時會將彈框內的滑動也阻止掉，我們則無法完成該需求。如果這個不行，我們還有別的方法來完成需求嗎？
??我考慮到一種方案，但是屬于DOM操作，與vue的初衷可能不太符合。不過此方案也不矢為一種能夠有效解決問題的辦法。
思路：
利用cssposition: fixed以及top: x px來固定位置。步驟分解如下：
- 寫一個樣式放到公共css中備用；
- 點擊按鈕，控制彈窗顯示隱藏；
- 兩個方法，一個控制將步驟
1寫的css動態添加到body上，另外一個則控制移除該效果；- 添加方法：①獲取當前頁面距離頂部高度，保存到data中；②給body添加步驟1的css；③設置body的高度為剛才獲取到的高度。
- 移除方法： ①將剛才冬天給body添加的css移除；②當前滑動高度設置為data中存儲的高度。
b. 效果
可滑動彈窗.gif
c. 兩個案例完整代碼
<template>
<div class="modalTest">
<!-- 按鈕組 -->
<div class="btn">
<el-button type="success" size="small" @click="modalSign1 = true">彈窗1</el-button>
<br>
<el-button type="danger" size="small" @click="openModal">彈窗2</el-button>
</div>
<!-- 背景數據 -->
<div class="listBG">
<ul>
<li v-for="item in 50">這是第{{item}}條背景數據</li>
</ul>
</div>
<!-- 彈框1 -->
<div class="modalBox" v-if="modalSign1" @touchmove.prevent @click.self="modalSign1 = false">
<div class="modal">
<ul>
<li v-for="item in 8">這是第{{item}}條數據</li>
</ul>
</div>
</div>
<!-- 彈框2 -->
<div class="modalBox" v-if="modalSign2" @click.self="closeModal">
<div class="modal">
<ul>
<li v-for="item in 20">這是第{{item}}條數據</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalSign1: false, // 彈窗是否打開
modalSign2: false, // 彈窗是否打開
scrollTop: undefined, // 距離頂端的值
className: 'modalOpen', // 類名
}
},
methods: {
// 打開彈層 要做的事
afterOpen () {
this.scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(this.className);
document.body.style.top = `-${this.scrollTop}px`;
},
// 彈層關閉之前 要做的事
beforeClose () {
document.body.classList.remove(this.className);
document.scrollingElement.scrollTop = this.scrollTop;
},
// 打開彈窗
openModal () {
this.modalSign2 = true;
this.afterOpen();
},
// 關閉彈窗
closeModal () {
this.modalSign2 = false;
this.beforeClose();
}
},
mounted() {
}
}
</script>
<style type="text/scss" lang="scss" scoped>
.modalTest{
width: 100%;
min-height: 100vh;
overflow: scroll;
.btn{
padding: 10px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
&>button{
margin: 10px 0;
}
}
.listBG{
text-align: center;
line-height: 50px;
}
.modalBox{
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
z-index: 999;
.modal{
width: 220px;
height: 280px;
overflow: scroll;
background: #fff;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-box-shadow:10px 10px 9px #332A0D;
-webkit-box-shadow:10px 10px 9px #332A0D;
box-shadow:10px 10px 9px #332A0D;
padding: 30px 0 0;
ul{
text-align: center;
li{
list-style: none;
line-height: 30px;
}
}
}
}
}
</style>
d. 備注
.modalOpen的css樣式，放在公共樣式中，因為我們要改變的是body的樣式，因此在組件中寫的樣式可能會失效。例如，我將樣式放在了src/assets/css/common.css
/*彈層*/
body.modalOpen {
-webkit-overflow-scrolling:touch;
position: fixed;
width: 100%;
}
