uni-popup 遮罩层事件穿透的问题

根据uniapp官方文档用了page-meta,这个属性,但是如果滑动遮罩层依然会出现滑动的现象,
所以解决方法是



在uni-popup 里面加上style=“touch-action:none”,来阻止遮罩层滚动。
-----更新----

光是在遮罩层禁止滑动还没有用,需要在最外层加一个@touchmove.stop.prevent=“disabledScroll”

实例代码

<view @touchmove.stop.prevent="disabledScroll">
		<uni-popup  ref="show_agree" background-color="#fff"
			style="border-radius: 5rpx;touch-action:none;" @change="change_agree">
			
			<view class="pop_detail">
			内容
				
			</view>
		</uni-popup>
	</view>

--------时间:2023年5月31日 11:10:46更新---------
以下思路参考大佬方案三
究极处理方案,以上方案都无效的时候,可以采取fixd定位的方法,该方法虽然在定位的时候会自动吸顶,但是在弹窗内部下滑的时候可以阻碍底部滚动,废话不多说,上代码

首先在生命周期这个地方记录滚动位置

	onPageScroll(res){
			this.scrollTop=res.scrollTop
				
			},

然后在uni-pop这个弹窗设置一个开关,@change

	<uni-popup :mask-click="false" ref="records" background-color="#fff"    @change="change_agree"
		style="border-radius: 5rpx;touch-action: none;">
		<view class="pop_detail"  >
			<scroll-view   @scrolltolower.stop="more_detail"	 style="height: 93vh;width: 100%;overflow:hidden;" scroll-y="true" >
				
				//填你要的内容
			</scroll-view>
			
			
			
		</view>
	</uni-popup>
	

在开关这个地方记录你当前的滚动位置,在关闭的时候再回到这个位置,这样就不会造成吸顶的现象。

//回到之前打开弹窗的位置
this.$nextTick(() => {
				    setTimeout(() => {
				       
				       uni.pageScrollTo({
				           duration:0,
				           //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				           scrollTop:that.scrollTop_behind
				       })
				    }, 100);
				});

viewRecord: function(methodid) {
		
			//在弹窗位置记录打开弹窗之间的位置
			that.scrollTop_behind=that.scrollTop

}

在底部滚动的区域设置fixd定位

:style="{'position':show_scroll?'fixed':''}"

以上fixd方法能完美解决底部穿透问题。

你可能感兴趣的:(uni-app)