I am clicking the button, the mask appears, and then I click the button inside the mask. I want one view layer to disappear and the other to appear, but I can"t.
at first, when I turned off one mask, I showed another mask, and this effect could not be achieved
.the following is my code. In the same mask, I expected to click a button in the mask. One view disappears and the other appears:
Code for main.wxml:
< view class="main" >
< image src="/image/mainTitle.jpg" > < / image >
< view class="newUserLead" bindtap="showRule" > novice guide < / view >
< / view >
< view class="footers" >
< view class="footerLeft" > past Cat Box < / view >
< view class="footerRight" > subscribe to Cat Box < / view >
< / view >
<view class="ruleZhezhao {{isRuleTrue?"isRuleShow":"isRuleHide"}}">
<view class="ruleZhezhaoContent">
<view class="textss">
<image src="/image/img/ljj.jpg" style="width:100%"></image>
<text>~~</text>
</view>
<view class="nextStep" bindtap="nextRule"></view>
</view>
<view class="ruleZhezhaoContent2 {{isRuleTrue2?" isRuleHide2":"isRuleShow2"}}">
<view class="textss">
<image src="/image/img/ljj.jpg" style="width:100%"></image>
<text>~~</text>
</view>
<view class="nextStep" bindtap="nextRule2"></view>
</view>
</view> this is the main.css code:
/ novice guide style /
.newUserLead {
position: absolute;
width: 60px;
height: 25px;
line-height: 25px;
text-align: center;
right: 40rpx;
top: 10px;
font-size: 12px;
border: 1px solid-sharpfff;
}
.isRuleShow, .isRuleShow
position: fixed;
background-color:rgba (0,0,0,0.5);
zbr index: 2000;
top: 0;
left: 0;
}
.ruledecizhaoContent, .rulecallizhaoContent2 {
padding: 20rpx 0;
width: 80%;
background:-sharpe1d2b1;
margin: 10% auto;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.ruleroomzhaoContent .textss, .ruleroomzhaoContent2.textss {
width: 80%;
}
.nextStep {
border:1px solid-sharpfff;
height:25px;
font-size:12px;
text-align:center;
line-height:25px;
width:50px;
border-radius:5px;
}
.ruleroomzhaoContent .textss image, .ruleroomzhaoContent2.textss image {< <
width:100%;
height:250px;}
this is the main.js file code
/ / this is a novice-led function
showRule: function () {
this.setData({
isRuleTrue: true
})},
/ / turn off the rule prompt
hideRule: function () {
this.setData({
isRuleTrue: false
})},
nextRule:function () {
this.setData({
isRuleTrue: false,
isRuleTrue2:true
})},
/ / Please paste the code text below (do not replace the code with pictures)