uniapp?H5遮罩層、彈窗以及蒙層滾動穿透/滑動穿透解決辦法

更新時間：2024年01月25日 08:57:00 作者：weixin_45368519

最近用uin-app做項目遇到了不少問題,下面這篇文章主要給大家介紹了關于uniapp?H5遮罩層、彈窗以及蒙層滾動穿透/滑動穿透的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

首先來一句：uniapp 一端開發(fā)，多端BUG近期項目用到了uniapp + uview 就出現(xiàn)了很多奇怪的問題，滾動穿透問題更是奇怪且多發(fā)。不論是彈窗，蒙層，遮罩，或者普通的元素置頂都會出現(xiàn)，也是解決了很久，特地記錄一下，希望對各位’牛馬’有用

一、解決過程

第一次：在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>

怎么辦呢，繼續(xù)找唄，還真找到了，他支持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~~~~ 運行，??！什么啊，它并沒有生效，又弄了很長時間，但是項目又比較急就只能擱置了，后面在花時間弄吧

第三次：它它它真滴又出現(xiàn)啦，不過這次是在其他地方uview 彈出層組件 u-popup

我心里想同樣是uview的東西那寫哪個也應該會生效 --@touchmove，但是它辜負了我的信任，居然沒有用
完了客戶又在提這個問題了，怎么辦呢，誰讓客戶是上帝呢，智障客戶又不是不能用，只能在研究唄，又是2個小時，當要我放棄時終于看到了希望，發(fā)現(xiàn)這個鬼玩意的滾動條居然是在整個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 這個樣式在其他地方寫也是會生效的只要控制好出現(xiàn)的時間就能解決滾動穿透的問題