這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)vue項(xiàng)目中mintui彈窗彈起來(lái)底部頁(yè)面滾動(dòng)怎么解決，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

10年積累的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有邢臺(tái)縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

經(jīng)過(guò)dom層層注釋縮小反饋終于找到問(wèn)題所在。

問(wèn)題經(jīng)過(guò)

我在彈起彈窗的時(shí)候，設(shè)置了popupVisible為true

然后觸發(fā)了vue的updated生命周期鉤子函數(shù)

然后我在這個(gè)函數(shù)里面做了去this.$refs.container.offsetHeight導(dǎo)致頁(yè)面重繪

然后就導(dǎo)致了底部頁(yè)面向上滾動(dòng)

解決辦法

去掉updated函數(shù)里面的重繪方法

補(bǔ)充知識(shí)：項(xiàng)目總結(jié)之關(guān)于vue中使用mint-ui的mt-popup出現(xiàn)滾動(dòng)穿透問(wèn)題的解決總結(jié)

說(shuō)實(shí)話，使用Mint-ui這個(gè)ui組件的過(guò)程中遇到了很多問(wèn)題，這個(gè)ui組件問(wèn)題真多。

先說(shuō)今天的主題吧，我在使用popup選擇框的時(shí)候和datepicker時(shí)間選擇器的時(shí)候出現(xiàn)了滾動(dòng)穿透的問(wèn)題，特別是在ios上面。

找了好多方法，最后同事給出了一個(gè)好的方法，很簡(jiǎn)潔，于是就想著總結(jié)下來(lái)。

防止?jié)L動(dòng)穿透 只需加入@touchmove.native.stop.prevent 阻止默認(rèn)根元素的默認(rèn)事件就可以了，native是關(guān)鍵，這個(gè)表示根元素的意思，也就是body或者h(yuǎn)tml

代碼如下：

Popup組件：

     ...
  
  // 防止?jié)L動(dòng)穿透 只需加入@touchmove.native.stop.prevent 阻止默認(rèn)根元素的默認(rèn)事件就可以了native是關(guān)鍵，這個(gè)表示根元素的意思，也就是body或者h(yuǎn)tml
  
   ...
  

本文名稱：vue項(xiàng)目中mintui彈窗彈起來(lái)底部頁(yè)面滾動(dòng)怎么解決-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/escho.html