1. Problem Description
The mini program’s built-in pop-up box cannot meet certain needs. For this reason, a custom pop-up box needs to be set up. But here comes the problem. When sliding the pop-up layer, the pop-up layer page will follow the scroll bar at the bottom of the pop-up layer. scroll
2. Solution:
Add catchtouchmove event to the popup layer
- If the content in the pop-up layer needs to be scrolled, you need to use the scroll-view component
. Principle:
The purpose of setting catchtouchmove="true" on the pop-up window element is to prevent the scrolling of the pop-up window from scrolling the outer page. However, if the pop-up window element sets this attribute, the overflow:auto written by yourself in the pop-up window will become invalid. At this time, you cannot use the overflow you wrote yourself. You need to use the scroll-view component instead, which can solve this problem.
catchtouchmove is equivalent to preventDefault. Preventing the default behavior means preventing scrolling events.
It is similar to onContextMenu={e => e.preventDefault()} in js to prevent the right-click default event. The right-click menu will pop up by default.
There is no similar catchtap=true in the mini program. Tap is an internal event of the mini program. Currently, as long as catchtouchmove=true is used, there may be catchtouchstart=true to prevent the default behavior of touchstart.
3. Sample code
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;
}
4. Summary:
Use fixed positioning for the pop-up window background, occupy the full screen, and set translucency.
What is shown above is that the simplest way to solve the problem of scroll penetration is to set catchtouchmove="return/true".
Use scroll- for the specific content displayed in the pop-up window. view, and pay attention to setting the height of scroll-view,
and then set the attribute scroll-y to scroll-view, and that's it. (ps: Remember to set scroll-y, otherwise it will not have any effect and the scroll-view will not slide)