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

10年的辛集網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整辛集建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“辛集網(wǎng)站設(shè)計(jì)”,“辛集網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

【遇到的問(wèn)題】

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

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

1. 滑動(dòng)蒙層空白處不讓滑動(dòng)事件穿透。

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

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

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

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

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

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

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

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

 

  

  
點(diǎn)擊item{{num}}
  
 

　　 
 

  

  

   消息提示 {{num}}
  
  
 

2. 給整個(gè)列表動(dòng)態(tài)綁定的css如下

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

3. 給列表整個(gè)div動(dòng)態(tài)綁定.noScroll 后，底部列表照樣可以滑動(dòng)，所以考慮繼續(xù)向上追溯。利用watch監(jiān)聽蒙層是否顯示，當(dāng)顯示時(shí)，設(shè)置body相應(yīng)樣式；但蒙層消失時(shí)，body樣式恢復(fù)。但是在vue里怎么操作body里，雖然vue是數(shù)據(jù)驅(qū)動(dòng)的，不提倡直接操作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ù)代碼對(duì)真機(jī)上一些滑動(dòng)問(wèn)題進(jìn)行了修復(fù)補(bǔ)充，包括處理一些滾動(dòng)條位置等。

【Demo地址】

手動(dòng)將路由切到 /three 就是此頁(yè)示例

https://github.com/LiJinShi/wechat_back_vue

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。