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

10年積累的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(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)過dom層層注釋縮小反饋終于找到問題所在。

問題經(jīng)過

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

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

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

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

解決辦法

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

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

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

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

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

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

代碼如下：

Popup組件：

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

分享文章：vue項(xiàng)目中mintui彈窗彈起來底部頁面滾動(dòng)怎么解決-創(chuàng)新互聯(lián)
地址分享：http://www.rwnh.cn/article40/escho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、微信小程序、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)