小程序之显示 隐藏功能(二)
程序员文章站
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)
})
},
- 记录一下 也是自己的学习经历