项目中有一个生成带有二维码的分享卡片的需求,选择了使用 Painter 绘制。
其中有一个需求如下图所示:顶部的红色区域固定,<painter>
画板可以在 y 轴上滚动,并且位于红色区域下方。
但是,给 <painter>
设置 z-index
无效:在调试器里显示正常,是红色在上,<painter>
在下;在真机上 <painter>
那个 canvas
依然是层级最高的。即便去到 components/painter/painter.wxml
改底层的 <canvas>
也是如此。
甚至,直接在真机调试时手动给 <canvas>
设置 z-index
也是无效的。
最开始以为是 <canvas>
原生组件层级最高的问题,后来了解到 canvas
已经支持设置 z-index
,不是原生组件的问题。请大家看看可能是什么问题。
真机调试时,<painter>
不会马上出来,有一段绘制的时间,在调试界面显示的有一个「等待同步 API measureText 调用」。难道和这个有关系吗?
"最开始以为是
<canvas>
原生组件层级最高的问题,后来了解到canvas
已经支持设置z-index
" 这个确定吗?如果是支持z-index, 你查看下<painter> 里面的画布z-index是多少, 是不是里面的画布z-index 也需要修改呢?
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E7%9B%B8%E5%AF%B9%E5%B1%82%E7%BA%A7 z-index只是控制原生组件之间的层级关系。 canvas的同层渲染支持还在开发中
官方人员在这个帖子里说
canvas
已经支持设置z-index
:https://developers.weixin.qq.com/community/develop/doc/000c0a94d042b0d281b8705105b800?jumpto=comment&commentid=0000c2bf1642204288b8737e4514给 <painter> 设置 z-index ,底层里的 <canvas> 没有 z-index 。直接在真机调试时改底层 <canvas> 的 z-index 也没效果。
那应该就是 @晨 说的目前只支持原生组件之间的层级关系了。
原来如此。感谢。那就先用其他方法了,耐心等待官方支持。