欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序之显示 隐藏功能(二)

程序员文章站 2022-06-10 10:45:22
...

我的需求很简单,点击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)
     })  
 },  

小程序之显示 隐藏功能(二)

  • 记录一下 也是自己的学习经历
相关标签: 显示-隐藏