微信小程序蒙层中，点击按钮，一个view消失，另一个出现

Question

我在实现点击按钮，出现蒙层，然后在点击蒙层里面的按钮，想实现一个view层消失，另一个出现，却实现不了。

刚开始我把一个蒙层关闭的同时，显示另一个蒙层，这个效果也实现不了

以下是我，在同一个蒙层里面，预想点击一个蒙层里的按钮，一个view消失，另一个出现的代码：

main.wxml的代码：
<view class='main'>
<image src='/image/mainTitle.jpg'></image>
<view class='newUserLead' bindtap='showRule'>新手指导 </view>
</view>
<view class='footers'>
<view class='footerLeft'>历代猫盒</view>
<view class='footerRight'>订阅猫盒</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>

这是 main.css的代码：
/ 新手指导的样式 /
.newUserLead{
position: absolute;
width: 60px;
height: 25px;
line-height: 25px;
text-align: center;
right: 40rpx;
top: 10px;
font-size: 12px;
border: 1px solid #fff;
}
.isRuleShow, .isRuleShow2{
display: block;
}
.isRuleHide, .isRuleHide2{
display: none;
}
.ruleZhezhao{
height: 100%;
width: 100%;
position: fixed;
background-color:rgba(0, 0, 0, .5);
z-index: 2000;
top: 0;
left: 0;
}
.ruleZhezhaoContent, .ruleZhezhaoContent2{
padding: 20rpx 0;
width: 80%;
background: #e1d2b1;
margin: 10% auto;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
}
.ruleZhezhaoContent .textss, .ruleZhezhaoContent2 .textss{
width: 80%;
}
.nextStep{
border:1px solid #fff;
height:25px;
font-size:12px;
text-align:center;
line-height:25px;
width:50px;
border-radius:5px;
}
.ruleZhezhaoContent .textss image, .ruleZhezhaoContent2 .textss image {

width:100%;
height:250px;

}
这是main.js文件代码

//这个是新手引导的 函数
showRule: function () {

this.setData({
  isRuleTrue: true
})

},

//关闭规则提示
hideRule: function () {

this.setData({
  isRuleTrue: false
})

},
nextRule:function(){

this.setData({
  isRuleTrue: false,
  isRuleTrue2:true
})

},

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

为什么不用wx:if呢