小程序弹出层禁止列表滑动_小程序解决自定义弹出层滑动时下层页面滚动问题--穿透问题...

一、问题描述

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

二、解决办法

在弹出层加上 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

{{couponName}}

券码信息：{{ruleCode}}

使用规则:

{{ruleText}}

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不能滑动)

标签：自定义,--,height,弹出,catchtouchmove,margin,scroll,弹窗,view

来源： https://blog.csdn.net/qq_39490750/article/details/111310052