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

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

【遇到的問題】

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

【要實(shí)現(xiàn)的目標(biāo)】

1. 滑動蒙層空白處不讓滑動事件穿透?！　?/p>

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

要實(shí)現(xiàn)的效果其實(shí)如下：

【實(shí)現(xiàn)思路】

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

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

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

【相關(guān)實(shí)現(xiàn)代碼】

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

<!-- 列表 -->
 <div :class="{noScroll: isShowPopup}">
  <div class="item" v-for="num in 50" @click="itemClick(num)">
  <div >點(diǎn)擊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. 給整個列表動態(tài)綁定的css如下

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

3. 給列表整個div動態(tài)綁定.noScroll 后，底部列表照樣可以滑動，所以考慮繼續(xù)向上追溯。利用watch監(jiān)聽蒙層是否顯示，當(dāng)顯示時，設(shè)置body相應(yīng)樣式；但蒙層消失時，body樣式恢復(fù)。但是在vue里怎么操作body里，雖然vue是數(shù)據(jù)驅(qū)動的，不提倡直接操作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);
 }
 }

【補(bǔ)充】

最好去查看完整的demo代碼，因?yàn)楹罄m(xù)代碼對真機(jī)上一些滑動問題進(jìn)行了修復(fù)補(bǔ)充，包括處理一些滾動條位置等。

【Demo地址】

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

https://github.com/LiJinShi/wechat_back_vue

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。