当前位置:   article > 正文

解决:微信小程序饼状图组件层级过高覆盖在日历选择器上_van-circle层级问题

van-circle层级问题

我相信有很多小伙伴们和我一样,在开发微信小程序的过程中,当用到多个组件的情况下会出现上述情况,直接上图:
在这里插入图片描述
我这里饼状图用的是一个叫Wux Weapp的组件,而日历选择器则是用的Vant组件,而为什么会出现这种情况的原因是:饼状图的本质是通过canvas标签绘制的,而在小程序里,原生canvas组件的级别是非常高的,所以它会覆盖在别的组件上面。

在知道了原理后,我开始从提高日历选择器的级别和降低饼状图的级别下手,分别重新设置它们的z-index,但是这种方法并不管用,于是我又开始查阅Vant组件库的Github网址看看它的Issue里有没有人遇到和我一样的情况,果不其然我找到了!原问题地址是:https://github.com/youzan/vant-weapp/issues/4052,有兴趣的小伙伴们可以看看。
在这里插入图片描述
Vant团队回复的解决方案是:将canvas设置为2D,但这样会导致饼状图没有环绕的这个样式了,所以这个方案也被我给Pass掉了。
在这里插入图片描述
后来我又查了很多人是如何解决这个问题的,比如说把canvas转化为图片存在后端,以及使用cover-view等等来实现,我一一对比过后发现其实都不太适合用在我这个项目里,所以我选择了一种最简单且相对温和的实现方式就是,我在打开日历选择器时将饼状图隐藏,将日历选择器关闭或者确认的时候就将饼状图重新显示出来实现需求。

如果有更好的解决方案可以评论区交流交流~
码字不易,喜欢的点个赞或关注,希望大家写的程序永远没有Bug。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/526517
推荐阅读
相关标签
  

闽ICP备14008679号