微信小程序遮罩层的实现

更新日期: 2019-06-08 阅读次数: 1689 字数: 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 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

谈笑风生

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

爱评论不评论

近期节日

2019年12月20日 澳门回归日
2019年12月21日 国际篮球日
2019年12月22日 冬至
2019年12月24日 平安夜
2019年12月25日 圣诞节
查看更多节日