微信小程序遮罩层的实现

更新日期: 2019-06-08 阅读次数: 8886 字数: 87 分类: 微信小程序

应用场景

  • 第一次打开小程序时的引导图显示
  • 弹窗显示信息

模板代码

<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%;
}

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

谈笑风生

那如果我要遮罩遮住头部怎么做呢