评论

用户引导组件开发(2)遮罩层与突出元素

在用户引导组件中,如何确定元素位置,并做出合适的遮罩层

我们一步步来吧,包括我踩过的坑我也会还原一遍,让大家一起长长见识

遮罩层

遮罩层是最没技术难度的,写个css就可以了。

.mask {
  z-index: 1110;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

按然后再加个bindtap,控制点击之后消失,感觉直接就可以用了呢。这里有铅笔画不出蜡笔的味道提供的一个代码片段:

https://developers.weixin.qq.com/s/cvqEYzmM7Ffn

突出元素

这个才是难点所在。

1、确定元素位置。

我们首先要找出这个元素的轮廓,这个我是通过boundingClientRect实现的。

  const query = wx.createSelectorQuery();
  query.select("#gameInfo").boundingClientRect(); //gameInfo就是我们所需要突出展示的元素ID,后续可以用config传入
  query.exec(function(res) {
      console.log(res);
  }

输出如下:

可以看到这个办法很好地取到了所要突出的元素的位置。

2、画出镂空遮罩。

这里我参考了这篇文章:https://www.cnblogs.com/mxdmg/p/10427605.html

文章中的方法一就不说了,又麻烦又浪费空间。

方法二我试了下,展示效果确实不错,但是也如文中所说的,点遮罩的时候会点到底下的元素,肯定会影响效果。

方法三没试,因为感觉有跟二一样的缺点。

方法四也没试,因为一看就知道很麻烦。

方法五把我导向了mask-image,想说能否用这个css属性在遮罩层上挖个洞出来。关于这方面的应用我觉得这篇文章写得挺好的:https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/。然而一一试过后,发现这个属性在小程序中好像用不了(也有可能是我哪里出错,反正就是没法生效)。

呵呵。。。以上几种方式折腾了一个晚上。

后来想想,干脆抛开幻想抛开依赖,自力更生。

不搜了,自己土办法画一个。

我用四个view作为遮罩,框出了需要突出的元素。

<view wx:if="{{showGuide}}" class="mask" bindtap="getHidden">
  <view class="mask_block" style="width:100%;top:0px;left:0px;height:{{showArea.top}}px"></view> //上
  <view class="mask_block" style="width:100%;top:{{showArea.bottom}}px;left:0px;height:100%"></view>  //下
  <view class="mask_block" style="height:{{showArea.height}}px;top:{{showArea.top}}px;left:0px;width:{{showArea.left}}px"></view> //左
  <view class="mask_block" style="height:{{showArea.height}}px;top:{{showArea.top}}px;left:{{showArea.right}}px;width:100%"></view> //右
</view>


上面的showArea就是第一步中取到的元素位置。

这样一来,遮罩中的元素突出就解决了。

3、还有一个坑

本来以为这一步搞定的时候,发现这个镂空的位置竟然还会漂移!在开发工具和真机中的位置不一样,就算同在真机中,这次展示和下次展示的位置也有可能不一样!

这TM是薛定谔的镂空框!

这就是当时的神奇漂移。

经验告诉我,会出现这种不确定性的——

十之八九都和元素的加载是否完成有关系

请好好记住这句话,可以节省你至少一天的调试时间。

是的,坑就在于步骤一的

 query.select("#gameInfo").boundingClientRect();

什么时候取的很关键。在小程序布局完成前,你可能会取到一个偏差值,导致了后面的踩坑。

我之前是在组件生命周期(还不清楚组件生命周期的看这里)中attached环节执行,不行。发现手册中还有一个ready,感觉和page中的onReady是一个东西,然而还是不行。。。

看来还是必须等页面的onReady触发之后才能取到完全正确的值。

所以我必须在主页面的onReady事件发生后再来做这个事情。

那么如何确定onReady呢?相当于我必须能够在onReady事件中去调用用户引导组件的初始化函数。。。想来想去,他们两者之间能够互动的也只有setData了。

也就是数据监听器,不懂的点这里

幸好按计划本来也是要传入配置数组的。于是在pages中的onReady传入配置数组,然后在组件中对配置数组进行监听。

 observers: {
    'config': function(config) {
      if (config) {
        this.initMask(config);
      }
    }
  }

如此一来,遮罩层跟元素的突出展示就算完成了。

当然,这样的遮罩层还是有些不足的,例如只支持方形镂空,如果是圆形元素看着就不那么美观。。。好在我目前没有这方面需求,以后有遇到再说吧。

最后一次编辑于  2020-05-10  
点赞 3
收藏
评论

2 个评论

  • 和光同尘
    和光同尘
    10-31

    为什么不把突出元素的z-index的值调的比遮罩层高呢?

    10-31
    赞同
    回复
  • 和光同尘
    和光同尘
    10-31

    第一个方法真好

    10-31
    赞同
    回复
登录 后发表内容