小程序解决自定义弹出层滑动时下层页面滚动问题--穿透问题

一、问题描述

小程序自带弹框满足不了某些需求，为此则需要设置自定义弹框，但是问题来了，在滑动弹层的时候，弹层页面会随着弹层底部的滚动条滚动

二、解决办法

在弹出层加上 catchtouchmove 事件

- 如果弹层里的内容需要滚动则需要使用scroll-view组件

原理：

弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动，但是如果弹窗元素设置了该属性，弹窗内的自己写的overflow:auto就会失效，这时不能用自己写的overflow，要改用scroll-view组件，就可以解决该问题。

catchtouchmove相当于preventDefault，阻止默认行为即阻止滚动事件,
类似js中的onContextMenu={e => e.preventDefault()}阻止右键默认事件，右键默认是会弹出菜单的。
小程序中没有类似的catchtap=true，tap是小程序的内部事件，目前只要用到catchtouchmove=true，可能会有catchtouchstart=true阻止touchstart默认行为。

三、示例代码

wxml

<!-- 弹框内容-->
<image class="close" src="/images/close2.png" bindtap="closeRule" hidden="{{rule}}"></image>
<view class="ruleModal" hidden="{{rule}}" catchtouchmove='return'>

	<view class="qrcode" wx:if="{{ruleCode}}">
		<canvas canvas-id="myQrcode" width="200" height="200"></canvas>
	</view>
	<view class="title" wx:if="{{ruleCode}}">{{couponName}}</view>
	<view class="couponName" wx:if="{{ruleCode}}">券码信息：{{ruleCode}}</view>
	<view class="descTit">使用规则:</view>
	<scroll-view scroll-y="true">
	<view  class='desc'>	{{ruleText}}</view>
	</scroll-view>
</view>
<!-- 弹层遮罩 -->
<view class="mask" bindtap="remindHide" hidden="{{rule}}" catchtouchmove='return'></view>

wxss

.ruleModal{
    width: 540rpx;
    min-height: 700rpx;
    background: #fff;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30rpx;
    color: #4A4A4A;
    position: fixed;
    top: 160rpx;
    left: 50%;
    margin-left: -270rpx;
    border-radius: 12rpx;
    z-index: 1001;
}
.ruleModal .title{
    font-size: 36rpx;
    color: #000;
    font-weight: bold;
    margin:20rpx 40rpx 10rpx;
}
.ruleModal .desc{
    font-size: 28rpx;
    line-height: 46rpx;
    text-align: left;
    margin:0 40rpx;
    color: #999;
    padding-bottom: 20rpx;
    max-height: 200rpx;
}
.close{
    width: 80rpx;
    height: 80rpx;
    position: fixed;
    right: 33rpx;
    top: 60rpx;
    z-index: 1001;

}
.mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .4;
    background: #000;
    z-index: 1000;
}
.qrcode{
    width:100%;
    margin-top: 30rpx;
}
.qrcode canvas{
    width:200px;
    height:200px;
    margin:0 auto;
}
.couponName{
    font-size: 28rpx;
color: #999;
margin: 0 40rpx;
padding-bottom: 20rpx;
border-bottom:dashed 2rpx #E4E4E4;
}
.descTit{
    font-size:28rpx;
    margin:30rpx 40rpx 10rpx;
    color:#000;
}

四、小结：

1. 弹窗背景使用fixed定位，占满全屏，设置半透明
2. 上面展示的是解决滚动穿透最简单的办法 就是设置catchtouchmove=“return/ true”
3. 在弹窗里面具体显示的内容使用scroll-view，并注意设置scroll-view的高度
4. 再给scroll-view设置属性scroll-y，就可以了。(ps：切记一定要设置scroll-y，否则将不会起任何效果，导致scroll-view不能滑动)

标签：自定义,--,height,弹出,catchtouchmove,margin,scroll,弹窗,view
来源： https://blog.csdn.net/qq_39490750/article/details/111310052