uniApp禁止遮罩弹窗下的页面滚动

文章目录

• 问题
• 解决
• 代码

问题

最近用uniApp开发一款软件，页面是可以滚动的长列表，自定义组件弹窗遮罩出来后，滑动屏幕，页面也跟着滚动。研究了网上的解决办法
在遮罩层的最外层的view元素中加入
@touchmove.stop.prevent="moveHandle"
或
@catchtouchmove="moveHandle"
亲有效，但不太理想，会导致弹窗和底层页面都不能滚动，或者处理不当就报一些其他错误，还是不太简便

解决

其实问题的根源是浏览器的滚动穿透问题，目前还没有根本性办法解决，但可以在弹窗遮罩出来时给最外层容器设置高度来解决，亲测这个办法还是比较完美。
弹出遮罩时动态设置页面最外层容器style属性的height值为100vh。 这里最好使用单位vh，100vh表示整个屏幕的高度，因为页面没有超出一屏，所以在弹窗上滑动时便不会触发底层的滚动事件，自然不会再有滚动穿透的问题。
此做法需要自定义列表滚动容器，也不是个很好的办法，表示无解

代码

<template><view class="container" :style="showMsk ? 'height: 100vh' : ''"><scroll-view scroll-y="true">scroll-view><view v-if="showMsk" class="msk">view>view>
<template>

data() {return {showMsk: false,};
},
methods: {moveHandle: {return false;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！