很常见的就就是点击筛选 出现筛选条件的场景
效果
WXML
<!--index.wxml-->
<button bindtap='showModal'>点这里</button>
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view class="commodity_attr_box" wx:if="{{showModalStatus}}">
<view>第1行</view>
<view>第2行</view>
<view>第3行</view>
</view>
WXSS
.commodity_screen {
width: 100%;
height: 100%;
position:absolute;
top: 30;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
.commodity_attr_box {
width: 100%;
overflow: hidden;
position:absolute;
left: 0;
top: 30;
z-index: 2000;
background: #fff;
padding-top: 20rpx;
}
.commodity_attr_box view{
height: 300rpx;
background-color: red;
margin: 20rpx;
}
js控制显示和隐藏
showModal: function () {
this.setData({
showModalStatus: true
})
},
hideModal: function () {
this.setData({
showModalStatus: false
})
}