前言

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

一、解決過(guò)程

第一次：在uview 組件（時(shí)間組件）u-datetime-picker上碰到，通過(guò)百度也是找到了解決方法

// 在父級(jí)元素添加重寫(xiě)滾動(dòng)事件   @touchmove.stop.prevent="() => { }"
<view @touchmove.stop.prevent="() => { }">
	<u-datetime-picker :show="isOpenDateHMS"  :minDate="getMillisecond()" @confirm="closeDateHMS" mode="datetime">
	</u-datetime-picker>
</view>

第二次：是寫(xiě)了自定義的遮罩層，居然這個(gè)問(wèn)題又來(lái)了

但是使用了第一次的方法@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~~~~ 運(yùn)行，??！什么啊，它并沒(méi)有生效，又弄了很長(zhǎng)時(shí)間，但是項(xiàng)目又比較急就只能擱置了，后面在花時(shí)間弄吧

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

我心里想同樣是uview的東西那寫(xiě)哪個(gè)也應(yīng)該會(huì)生效 --@touchmove，但是它辜負(fù)了我的信任，居然沒(méi)有用
完了客戶(hù)又在提這個(gè)問(wèn)題了，怎么辦呢，誰(shuí)讓客戶(hù)是上帝呢，智障客戶(hù)又不是不能用，只能在研究唄，又是2個(gè)小時(shí)，當(dāng)要我放棄時(shí)終于看到了希望，發(fā)現(xiàn)這個(gè)鬼玩意的滾動(dòng)條居然是在整個(gè)page上的，試著在控制臺(tái)寫(xiě)了點(diǎn)樣式居然生效了，這不就是轉(zhuǎn)機(jī)嘛*.。(??∀??)*.。在uni組件的文件里面找到這個(gè)路徑 uni_modules/uview-ui/components/u-popup/u-popup.vue

watch: {
	show(newValue, oldValue) {
		//在這里添加一句樣式    ㄟ(≧◇≦)ㄏ  
	    document.body.style.overflow = !newValue ? "auto" : "hidden";
	    // 是的就是這句話就能解決穿透的問(wèn)題
		if (newValue === true) {
			// #ifdef MP-WEIXIN
			const children = this.$children
			this.retryComputedComponentRect(children)
			// #endif
		}
	}
	},

document.body.style.overflow 這個(gè)樣式在其他地方寫(xiě)也是會(huì)生效的只要控制好出現(xiàn)的時(shí)間就能解決滾動(dòng)穿透的問(wèn)題

二、結(jié)語(yǔ)

這個(gè)滾動(dòng)穿透的問(wèn)題絕不止出現(xiàn)的h5這一個(gè)平臺(tái)上，可能會(huì)出現(xiàn)在其他地方，畢竟一端開(kāi)發(fā)，多端BUG，后面也是關(guān)注過(guò)，在各種小程序中也有這個(gè)問(wèn)題，后面要是在項(xiàng)目中遇到的話再來(lái)更新吧

到此這篇關(guān)于uniapp H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透解決辦法的文章就介紹到這了,更多相關(guān)uniapp H5遮罩層彈窗滾動(dòng)穿透問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論