vue解決彈出蒙層滑動穿透問題的方法

最近開發過程中遇到一些小問題(似乎問題總是那么多)，但一直沒什么時間去優化與解決。程序員不能被業務綁架，有時間還是花點在代碼上😀，開始這次的vue嘗試吧。

【遇到的問題】

在一個可滑動列表頁彈出一個全屏蒙層，蒙層固定，中間一塊顯示消息框，當用手滑動蒙層空白處時，滑動事件會穿透到底部列表頁，導致列表頁的滑動。

【要實現的目標】

1. 滑動蒙層空白處不讓滑動事件穿透。　　

2. 當蒙層消息框文字多時，要讓文字可上下滑動。

要實現的效果其實如下：

【實現思路】

1. vue提供的@touchmove.prevent可以用來阻止滑動，但是這個方法會對其內的子div的滑動事件也禁止掉了，這樣會導致中間文字無法滑動。如果沒有中間滑動需求，用@touchmove.prevent實現是一個很好的方法。

2. 蒙層設為fixed懸浮在最上，底部列表設置overflow-y: hidden；這樣可以列表內容就不可以滑了，但實際過程中沒有效果，于是想到繼續往列表父div向上追溯，對body和html標簽設置相關樣式，這樣就控制住了底部列表滑動問題。

3. 蒙層空白處點擊事件與中間文字點擊事件處理，防止事件冒泡帶來其他bug。

【相關實現代碼】

1. html代碼都是比較簡單，列表頁for循環實現；蒙層用一個變量控制其顯示和隱藏。但這里有幾個注意點: a. 給上面列表的div動態綁定了noScroll class，它的作用是當消息蒙層顯示時切換到相關的css樣式； b. 彈出的全屏蒙層，加有點擊事件是為了點空白處讓蒙層消失，但這里對顯示的每行文字還加了@click.stop="messageTitleClick(num)"這個方法，為什么加它呢——是因為蒙層空白處的點擊方法對整個蒙層都生效，在文字上加上這個方法可以屏蔽掉蒙層點擊方法的影響，即使這個方法里什么也不做它也是有作用的，另外這個方法上加了stop是為了防止它的點擊事件穿透到后面的div。代碼如下:

<!-- 列表 -->
 <div :class="{noScroll: isShowPopup}">
  <div class="item" v-for="num in 50" @click="itemClick(num)">
  <div >點擊item{{num}}</div>
  </div>
 </div>

　　 <!-- 蒙層 -->
 <div v-if="isShowPopup" class="popup" @click="popUpEmptyClick()">
  <div class="message">
  <p class="message-title" v-for="num in 30" @click.stop="messageTitleClick(num)">
   消息提示 {{num}}
  </p>
  </div>
 </div>

2. 給整個列表動態綁定的css如下

/* 當前蒙層顯示時生效 */
.noScroll {
 overflow-y: hidden;
}

3. 給列表整個div動態綁定.noScroll 后，底部列表照樣可以滑動，所以考慮繼續向上追溯。利用watch監聽蒙層是否顯示，當顯示時，設置body相應樣式；但蒙層消失時，body樣式恢復。但是在vue里怎么操作body里，雖然vue是數據驅動的，不提倡直接操作Dom。但此刻我也是沒什么好辦法了，就直接操作Dom了。如下：

watch: {
 isShowPopup(newVal, oldVal) {
  if (newVal == true) {
  let cssStr = "overflow-y: hidden; height: 100%;";
  document.getElementsByTagName('html')[0].style.cssText = cssStr;
  document.body.style.cssText = cssStr;
  } else {
  let cssStr = "overflow-y: auto; height: auto;";
  document.getElementsByTagName('html')[0].style.cssText = cssStr;
  document.body.style.cssText = cssStr;
  }

  // 下面需要這兩行代碼，兼容不同瀏覽器
  document.body.scrollTop = this.pageScrollYoffset;
  window.scroll(0, this.pageScrollYoffset);
 }
 }

【補充】

最好去查看完整的demo代碼，因為后續代碼對真機上一些滑動問題進行了修復補充，包括處理一些滾動條位置等。

【Demo地址】

手動將路由切到 /three 就是此頁示例

https://github.com/LiJinShi/wechat_back_vue

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。