一、问题描述
小程序自带弹框满足不了某些需求，为此则需要设置自定义弹框，但是问题来了，在滑动弹层的时候，弹层页面会随着弹层底部的滚动条滚动
二、解决办法
在弹出层加上 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;
}
四、小结：
弹窗背景使用fixed定位，占满全屏，设置半透明
上面展示的是解决滚动穿透最简单的办法 就是设置catchtouchmove=“return/ true”
在弹窗里面具体显示的内容使用scroll-view，并注意设置scroll-view的高度
再给scroll-view设置属性scroll-y，就可以了。(ps：切记一定要设置scroll-y，否则将不会起任何效果，导致scroll-view不能滑动)