vue實(shí)現(xiàn)一個(gè)移動端屏蔽滑動的遮罩層實(shí)例

在扯廢話浪費(fèi)大家的時(shí)間之前，先上個(gè)代碼好了，使用vue實(shí)現(xiàn)起來很簡單……

  <div class="overlayer" @touchmove.prevent >
  </div>

對，就是這么簡單，加上@touchmove.prevent就可以屏蔽滑動頁面了，然后再和普通的遮罩層一樣，加點(diǎn)樣式

/*遮罩層*/
.overlayer{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:10;
}

如此，便可以了_(:з)∠)_，vue真是好用啊……

以下是廢話和原理

開發(fā)移動端頁面的時(shí)候有一個(gè)很比較常見的需求，在出現(xiàn)彈窗時(shí)，禁止滑動彈窗后面的主體頁面； 

實(shí)際上大部分彈窗插件(或者組件)都帶了這樣的功能，所以我自己也從來沒研究過這個(gè)；

 這次的項(xiàng)目突然出現(xiàn)了一個(gè)需要自己寫彈窗的場景……我瞬間就懵逼了QwQ

雖然毫無思路，但是代碼還是要寫的，效果還是要實(shí)現(xiàn)的，問題還是要解決的，而程序員解決問題的第一步，自然就是先去百度一下；

 一般來講吧，普通問題都可以直接百度解決，百度不到的再考慮問人，屏蔽滑動的遮罩層這樣常見的需求，自然是有一大堆的解決方案，不過……太多了根本沒法選啊(╯‵□′)╯︵┻━┻

隨便試了一套方案，未果，遂放棄了繼續(xù)嘗試的打算……還是去翻別人的源碼吧。

 首先想到了mint ui中的popup組件;

認(rèn)真閱讀了一下，發(fā)現(xiàn)這個(gè)遮罩層也沒做什么事情，就是屏蔽了一下touchmove事件，拿到這個(gè)思路再回去自己查了下資料，移動端的屏幕滑動，實(shí)際上就是touchmove事件的默認(rèn)行為，在冒泡過程中任何一層阻止這個(gè)默認(rèn)行為，都可以阻止屏幕滑動，弄懂原理，實(shí)現(xiàn)起來就簡單了，傳統(tǒng)做法是在body上添加一個(gè)touchmove事件處理器，在顯示遮罩層的時(shí)候使用.preventDefault()方法阻止默認(rèn)行為，而vue就更簡單了，把彈窗之類的都寫在遮罩層元素內(nèi)部，然后直接在遮罩層上加上一個(gè)取消默認(rèn)行為的事件處理器，就可以咯~

注意！

如果彈窗不在遮罩層內(nèi)部，那么冒泡就不會經(jīng)過遮罩層，也就無法屏蔽滑動了0.0

  <div class="overlayer" @touchmove.prevent >
  </div>
  <div class="popup">
    如果在這個(gè)div中滑動，觸發(fā)的事件是不會經(jīng)過overlayer的，也就無法屏蔽滑動了
  </div>

如果實(shí)在不能把彈窗放到遮罩層內(nèi)，那么給彈窗加一個(gè)單獨(dú)的 .prevent 修飾符也可以，下面這兩種方式都是有效的：

  <!--plan A-->
  <div class="overlayer" @touchmove.prevent >
    <div class="popup">
      如果在這個(gè)div中滑動，觸發(fā)的事件會經(jīng)過overlayer，可以屏蔽滑動
    </div>
  </div>

  <!--plan B-->
  <div class="overlayer" @touchmove.prevent >
  </div>
  <div class="popup" @touchmove.prevent>
    如果在這個(gè)div中滑動，觸發(fā)的事件也會被禁用默認(rèn)行為, 也可以屏蔽滑動
  </div>

PC端方案

這種屏蔽方式只是屏蔽了滑動，對于PC端的鼠標(biāo)滾輪是無效的，但屏蔽鼠標(biāo)滾輪也很簡單，把 touchmove 事件處理器改成 scroll 事件的處理器就好了~就像這樣：

  <div class="overlayer" @scroll.prevent >
  </div>

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