当前位置: 首页 > news >正文

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

我相信有很多小伙伴们和我一样,在开发微信小程序的过程中,当用到多个组件的情况下会出现上述情况,直接上图:
在这里插入图片描述
我这里饼状图用的是一个叫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。

相关文章:

  • JS中数组splice方法使用需要注意的点
  • JS中for,for...in,for...of和forEach的用法和区别
  • JSON.parse和JSON.stringify的用法
  • 一文搞懂JS中变量作用域的那些事
  • JS给函数添加属性
  • 开发中常见的一些Bug
  • 一分钟搞懂JS函数提升与变量提升的优先级
  • ES5中原型、实例对象和构造函数的那些事
  • 我的创作纪念日
  • JS之手写bind原理
  • 关于解决电脑蓝屏C:\Windows\System32\Logfiles\Str\StrTrail.txt
  • 解决:flex布局之 flex-wrap:wrap 自动换行属性,导致上下两行div中间有空行
  • uni app 自定义 头部组件(1)禁用原生
  • uni app 自定义 头部组件(2) 局部 右侧按钮
  • uni app 自定义 头部组件(3)传值
  • 【腾讯Bugly干货分享】从0到1打造直播 App
  • 002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
  • 4个实用的微服务测试策略
  •  D - 粉碎叛乱F - 其他起义
  • ECS应用管理最佳实践
  • exports和module.exports
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • php的插入排序,通过双层for循环
  • 从重复到重用
  • 分享一个自己写的基于canvas的原生js图片爆炸插件
  • 使用agvtool更改app version/build
  • 写代码的正确姿势
  • 学习笔记TF060:图像语音结合,看图说话
  • No resource identifier found for attribute,RxJava之zip操作符
  • UI设计初学者应该如何入门?
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • #Spring-boot高级
  • (2)nginx 安装、启停
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (zt)最盛行的警世狂言(爆笑)
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (二十三)Flask之高频面试点
  • (附源码)ssm智慧社区管理系统 毕业设计 101635
  • (七)MySQL是如何将LRU链表的使用性能优化到极致的?
  • (转)原始图像数据和PDF中的图像数据
  • . Flume面试题
  • .jks文件(JAVA KeyStore)
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)
  • .NET delegate 委托 、 Event 事件
  • .NET/C# 的字符串暂存池
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...
  • .net项目IIS、VS 附加进程调试
  • .net专家(张羿专栏)
  • @FeignClient注解,fallback和fallbackFactory
  • @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
  • @test注解_Spring 自定义注解你了解过吗?
  • @vue/cli 3.x+引入jQuery
  • [.net] 如何在mail的加入正文显示图片