微信小程序中的小小的遮罩层

时间:2021-12-19 11:23:28

微信小程序中的小小的遮罩层微信小程序中的小小的遮罩层

<view class='pop_wx_er'>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view>ddddddddddddd</view>
<view bindtap='click'>试试</view>
<view class='rgb'hidden="{{hiddenName}}">
<view class='code_block'>
<image src='/assets/img/b8.png'class='code_img'bindtap='hidden'></image>
<text class='code_text'>扫码进入商城</text>
</view> </view>
</view>

 

.pop_wx_er{
background-color: #35b4ed;
top: 0;
width: 100%;
height:100%;
}
.pop_wx_er .rgb{
position: fixed;
z-index: 99;
top:0;
width: 100%;
height: 100%;
background:rgba(0, 0, 0, 0.5);
}
.pop_wx_er .rgb .code_block{
width: 650rpx;
height: 700rpx;
border-radius: 16rpx;
background-color: white;
margin: 250rpx 50rpx;
text-align: center;
}
.pop_wx_er .rgb .code_block .code_img{
width: 500rpx;
height: 500rpx;
margin: 90rpx 75rpx 0 75rpx;
}
.pop_wx_er .rgb .code_block .code_text{
font-size: 28rpx;
color: #666666;
}

js里就是简单的点击事件了

this.setData({hiddenName: !this.data.hiddenName})
初始值就是
hiddenName: true