uni-app自定義彈窗，底部頁面觸摸穿透問題解決方案（精華）

在uni-app中，彈窗的用途很常見，比如商品規格選取、廣告彈窗等。在實際開發中，有時候我們需要在頁面中有這樣一個彈窗，但彈窗會導致觸摸穿透的問題。這樣帶來的效果很不好，所以，在進行手動滑動時，我們需要在彈窗彈出後禁止原頁面繼續滾動。

一、解決觸摸穿透的方法：
       在網上看到最多用的方法是：在最外層的view上添加如下代碼：

<view class="" @touchmove.stop.prevent = "stopPenetrate"></view>

stopPenetrate(){
    return;
},

這樣可以阻止頁面上下滾動，但是加上這個屬性後，下次上下滾動頁面時無法做到了（即無法滾動頁面）。那這時有小夥伴可能說，定義一個變量觸摸狀態touchStatu，彈窗顯示與隱藏時給touchStatu不同的狀態值，然後在stopPenetrate中根據這個狀態值進行不同的判斷操作，達到想要的效果。例如如下

stopPenetrate(){
	if(this.touchStatu === 1){
		return;
	}
},

親測並不行，因爲寫了@touchmove.stop.prevent後，防止觸摸穿透已經生效了，其他判斷都是多此一舉，不管怎樣更改也不能把它扳回來。

<view class="" @touchmove.stop.prevent></view>

綜上，完美的解決方法是：用類來解決

1、當彈窗顯示時，添加類prevent，通過position:fixed來固定，達到原頁面被固定，原頁面不能被滑動。

2、當彈窗關閉時，去掉類prevent，可滑動原頁面。

具體代碼如下：

<template>
	
	<view class="" :class="isUps == true ? 'prevent' : ''">
		
		<!-- 原頁面內容 -->
		<view class="content">
			
		</view>
		
		<!-- 遮罩 -->
		<view class="isUps" v-if="shade"></view>
		
		<!-- 彈窗 -->
		<view class="ups" v-if="isUps">
			<!-- 彈窗內容比較多，需要滑動的情況 -->
			<scroll-view scroll-y="true" >
				<view class=""></view>
			</scroll-view>
			
			<!-- 或 -->
			<!-- 內容比較少，不需要滑動彈窗的情況 -->
			<!-- <view class=""></view> -->
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				isUps:false,//控制彈窗與遮罩的顯示與隱藏（彈窗與
                                 遮罩是同時顯示與隱藏的，所以用同一個變量控制就ok了）
				
			}
		},
		
	}
</script>

<style>
	/* 起到固定的作用 ,從而解決原頁面觸摸穿透的問題*/
	.prevent {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
	}
	
	/* 下面樣式根據自己情況來更改，只是舉例 */
	/* 原頁面內容 */
	.content{
		width:100%;
		height: 2000upx;
	}
	/* 遮罩樣式 */
	.shade{
		width:100%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		z-index: 98;
	}
	/* 彈窗樣式 */
	.ups{
		width:100%;
		height: 400upx;
		position: fixed;
		left:0;
		bottom: 0;
		border:1upx solid green;
		background-color: #fff;
		z-index:99;
	}
	.ups scroll-view{
		height: 300upx;
	}
	
</style>

說明：在小程序中也可以用此方法來解決觸摸穿透的問題。