uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透解决办法
作者：weixin_45368519
前言
首先来一句：uniapp 一端开发，多端BUG近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下，希望对各位’牛马’有用
一、解决过程
第一次：在uview 组件（时间组件）u-datetime-picker上碰到，通过百度也是找到了解决方法
// 在父级元素添加重写滚动事件 @touchmove.stop.prevent="() => { }"
<view @touchmove.stop.prevent="() => { }">
<u-datetime-picker :show="isOpenDateHMS" :minDate="getMillisecond()" @confirm="closeDateHMS" mode="datetime">
</u-datetime-picker>
</view>
第二次：是写了自定义的遮罩层，居然这个问题又来了
但是使用了第一次的方法@touchmove居然不生效(・ε・｀)
<template>
<view class="container">
<view class="shade" v-if="canEdite"></view>
</view>
</template>
<style scoped lang="scss">
@import "common.scss";
.shade{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent !important;
z-index: 9999;
}
</style>
怎么办呢，继续找呗，还真找到了，他支持page-meta
<template>
<view class="container">
<page-meta :page-style="spanStyle"></page-meta>
<view class="shade" v-if="canEdite"></view>
</view>
</template>
<script >
export default {
data() {
return {
spanStyle:"overflow:auto"
}
},
methods: {
upPop(canEdite){
if(canEdite){
this.spanStyle="overflow:hidden";
}else{
this.spanStyle="overflow:auto";
}
}
}
}
</script >
linkstart~~~~ 运行，啊！什么啊，它并没有生效，又弄了很长时间，但是项目又比较急就只能搁置了，后面在花时间弄吧
第三次：它它它真滴又出现啦，不过这次是在其他地方uview 弹出层组件 u-popup
我心里想同样是uview的东西那写哪个也应该会生效 --@touchmove，但是它辜负了我的信任，居然没有用
完了客户又在提这个问题了，怎么办呢，谁让客户是上帝呢，智障客户又不是不能用，只能在研究呗，又是2个小时，当要我放弃时终于看到了希望，发现这个鬼玩意的滚动条居然是在整个page上的，试着在控制台写了点样式居然生效了，这不就是转机嘛*.。(๑･∀･๑)*.。在uni组件的文件里面找到这个路径 uni_modules/uview-ui/components/u-popup/u-popup.vue
watch: {
show(newValue, oldValue) {
//在这里添加一句样式 ㄟ(≧◇≦)ㄏ
document.body.style.overflow = !newValue ? "auto" : "hidden";
// 是的就是这句话就能解决穿透的问题
if (newValue === true) {
// #ifdef MP-WEIXIN
const children = this.$children
this.retryComputedComponentRect(children)
// #endif
}
}
},
document.body.style.overflow 这个样式在其他地方写也是会生效的只要控制好出现的时间就能解决滚动穿透的问题
二、结语
这个滚动穿透的问题绝不止出现的h5这一个平台上，可能会出现在其他地方，毕竟一端开发，多端BUG，后面也是关注过，在各种小程序中也有这个问题，后面要是在项目中遇到的话再来更新吧
到此这篇关于uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透解决办法的文章就介绍到这了,更多相关uniapp H5遮罩层弹窗滚动穿透问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！