微信小程序遮罩层的实现

更新日期: 2019-06-08 阅读次数: 3966 字数: 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%;
}

谈笑风生

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

爱评论不评论

近期节日

2020年10月01日 国庆节
2020年10月01日 中秋节
2020年10月04日 世界动物日
2020年10月08日 寒露
2020年10月09日 世界邮政日
2020年10月10日 辛亥革命纪念日
2020年10月13日 中国少年先锋队诞辰日
2020年10月14日 世界标准日
2020年10月15日 国际盲人节
2020年10月16日 世界粮食日
2020年10月17日 国际消除贫困日
2020年10月22日 世界传统医药日
查看更多节日