vue-解決彈出蒙層滑動穿透問題 vue-解決彈出蒙層滑動穿透問題

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 style="width:100%">點擊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);
    }
  }