微信小程序遮罩层的实现

发布时间: 2019-06-08 22:38:35 作者: 大象笔记

应用场景

模板代码

<view class="mask" hidden="{{ hide_mask }}" bindtap="close_mask">
    <image src="/images/some.png" ></image>
</view>

样式代码

.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 200;
}

.mask image{
  width: 100%;
  height: 100%;
}
我是一名山东烟台的开发者,联系作者