小程序之显示 隐藏功能（二）

我的需求很简单，点击close按钮隐藏掉遮罩层。

实现方法：

register.wxml:

使用变量控制隐藏类名

<view class="b1 view_hide{{showView?'view_show':''}}">
   <view class="t_w"> 
     <image src="../../images/register/close.png" bindtap="onChangeShowState"></image>
     <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" hover-class="none">一键自动注册</button>  
   </view> 
</view>

register.wxss:

.b1{
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    background:rgba(0,0,0,0.4);
    overflow: hidden;
    z-index: 999;
} 
.t_w{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.t_w image{
    width:48rpx;
    height:48rpx;
    margin-left: 290rpx;

}
.b1 button{
    height:60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
    width:300rpx;
    border-radius: 35px;
    background: #e64340;
    color:#fff;
}
.view_hide{  
    display: none;  
}
.view_show{  
    display: block;  
}    

register.js:

类名默认为 true

data: {
          ··
          showView:true  
       },
onLoad: function (options) {
        // 生命周期函数--监听页面加载  
  showView: (options.showView == "true" ? true : false)
} ,
onChangeShowState: function () {
   var that = this;        
     that.setData({
       showView:(!that.data.showView)
     })  
 },  

• 记录一下 也是自己的学习经历