1. Descrição do problema
A caixa pop-up integrada do miniprograma não pode atender a certas necessidades. Por esse motivo, uma caixa pop-up personalizada precisa ser configurada. Mas aí vem o problema. Ao deslizar a camada pop-up, o A página da camada pop-up seguirá a barra de rolagem na parte inferior da camada pop-up.
2. Solução:
adicione o evento catchtouchmove à camada pop-up
- Se o conteúdo da camada pop-up precisar ser rolado, você precisará usar o componente scroll-view
. Princípio:
O objetivo de definir catchtouchmove="true" no elemento da janela pop-up é evitar que a rolagem da janela pop-up role a página externa. No entanto, se o elemento da janela pop-up definir esse atributo, o overflow:auto escrito por você mesmo na janela pop-up se tornará inválido. Neste momento, você não pode usar o overflow que você mesmo escreveu. Em vez disso, você precisa usar o componente scroll-view, que pode resolver esse problema.
catchtouchmove é equivalente a preventDefault. Prevenir o comportamento padrão significa evitar eventos de rolagem.
É semelhante a onContextMenu={e => e.preventDefault()} em js para evitar o evento padrão do clique com o botão direito. O menu do botão direito aparecerá por padrão.
Não há catchtap=true semelhante no miniprograma. Tap é um evento interno do miniprograma. Atualmente, enquanto catchtouchmove=true for usado, pode haver catchtouchstart=true para evitar o comportamento padrão do touchstart.
3. Exemplo de código
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. Resumo:
Use posicionamento fixo para o fundo da janela pop-up, ocupe a tela inteira e defina a translucidez.
O que é mostrado acima é que a maneira mais simples de resolver o problema de penetração de rolagem é definir catchtouchmove = "return/true" Use
scroll- para o conteúdo específico exibido na janela pop-up.view e preste atenção ao definir a altura da visualização de rolagem e, em seguida,
defina o atributo scroll-y para visualização de rolagem e pronto. (ps: Lembre-se de definir scroll-y, caso contrário não terá nenhum efeito e a visualização de rolagem não deslizará)