問題
最近用
uniApp開發(fā)一款軟件，頁面是可以滾動(dòng)的長列表，自定義組件彈窗遮罩出來后，滑動(dòng)屏幕，頁面也跟著滾動(dòng)。研究了網(wǎng)上的解決辦法
在遮罩層的最外層的view元素中加入@touchmove.stop.prevent="moveHandle"
或@catchtouchmove="moveHandle"
親有效，但不太理想，會(huì)導(dǎo)致彈窗和底層頁面都不能滾動(dòng)，或者處理不當(dāng)就報(bào)一些其他錯(cuò)誤，還是不太簡便文章來源：http://www.zghlxwxcb.cn/news/detail-620729.html
解決
其實(shí)問題的根源是瀏覽器的滾動(dòng)穿透問題，目前還沒有根本性辦法解決，但可以在彈窗遮罩出來時(shí)給最外層容器設(shè)置高度來解決，親測這個(gè)辦法還是比較完美。
彈出遮罩時(shí)動(dòng)態(tài)設(shè)置頁面最外層容器style屬性的height值為100vh。 這里最好使用單位vh，100vh表示整個(gè)屏幕的高度，因?yàn)轫撁鏇]有超出一屏，所以在彈窗上滑動(dòng)時(shí)便不會(huì)觸發(fā)底層的滾動(dòng)事件，自然不會(huì)再有滾動(dòng)穿透的問題。
此做法需要自定義列表滾動(dòng)容器，也不是個(gè)很好的辦法，表示無解文章來源地址http://www.zghlxwxcb.cn/news/detail-620729.html
代碼
<template>
<view class="container" :style="showMsk ? 'height: 100vh' : ''">
<!-- 滾動(dòng)列表 -->
<scroll-view scroll-y="true"></scroll-view>
<!-- 自定義彈窗 -->
<view v-if="showMsk" class="msk"></view>
<!-- 自定義彈窗 -->
<!-- <view v-if="showMsk" class="msk" @touchmove.stop.prevent="moveHandle"></view> -->
</view>
<template>
data() {
return {
showMsk: false,
};
},
methods: {
moveHandle: {
return false;
}
}
到了這里，關(guān)于uniApp禁止遮罩彈窗下的頁面滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
