很常見的就就是點選篩選 出現篩選條件的場景

效果

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
    })
  }