问题
最近用
uniApp
开发一款软件,页面是可以滚动的长列表,自定义组件弹窗遮罩出来后,滑动屏幕,页面也跟着滚动。研究了网上的解决办法
在遮罩层的最外层的view
元素中加入@touchmove.stop.prevent="moveHandle"
或@catchtouchmove="moveHandle"
亲有效,但不太理想,会导致弹窗和底层页面都不能滚动,或者处理不当就报一些其他错误,还是不太简便文章来源:https://www.toymoban.com/news/detail-620729.html
解决
其实问题的根源是浏览器的滚动穿透问题,目前还没有根本性办法解决,但可以在弹窗遮罩出来时给最外层容器设置高度来解决,亲测这个办法还是比较完美。
弹出遮罩时动态设置页面最外层容器style
属性的height
值为100vh
。 这里最好使用单位vh
,100vh
表示整个屏幕的高度,因为页面没有超出一屏,所以在弹窗上滑动时便不会触发底层的滚动事件,自然不会再有滚动穿透的问题。
此做法需要自定义列表滚动容器,也不是个很好的办法,表示无解文章来源地址https://www.toymoban.com/news/detail-620729.html
代码
<template>
<view class="container" :style="showMsk ? 'height: 100vh' : ''">
<!-- 滚动列表 -->
<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;
}
}
到了这里,关于uniApp禁止遮罩弹窗下的页面滚动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!