摘要： 在微信小程序开发中，使用canvas绘制图形时，由于canvas默认处于最高层级，会导致与其他非原生组件的层级冲突。本文将介绍canvas层级冲突的问题，并提供解决方案。
1. 问题描述
在微信小程序中，canvas是一种强大的绘图工具，可以通过编写自定义代码来绘制图形、图表和动画等。然而，canvas默认会被放置在最高层，覆盖在其他非原生组件之上，这就导致了一个问题：当canvas与其他非原生组件（如按钮、输入框等）重叠时，用户无法与这些组件进行交互。
2. 默认层级
在小程序中，默认层级分为四层：background、normal、top、cover。canvas被视为cover层级，而其他非原生组件通常处于normal层级。在这种层级布局下，canvas的层级要高于其他非原生组件，因此会导致用户无法与这些组件进行交互。
3. 解决方案
为了解决canvas层级过高与其他非原生组件的层级冲突问题，我们可以通过以下两种方式来实现：
3.1 将canvas的层级降低
通过将canvas所在的层级降低至normal，可以使得canvas与其他非原生组件保持在同一层级，从而解决层级冲突的问题。具体实现方式如下：
<view style="position: relative;">
<canvas canvas-id="myCanvas" style="position: absolute;"></canvas>
<button>按钮</button>
<input type="text" placeholder="请输入内容"></input>
</view>
3.2 动态调整canvas的层级
如果canvas需要处于较高的层级中，而又需要与其他非原生组件交互，可以通过动态调整canvas的层级来解决冲突。具体实现方式如下：
const context = wx.createCanvasContext('myCanvas');
context.draw(true, () => {
// 绘制完成后，将canvas的层级调整至normal
wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
res[0].node.style.zIndex = 10;
});
});
4. 总结
在微信小程序中，canvas层级过高与其他非原生组件的层级冲突是一个常见的问题。为了解决这个问题，可以考虑将canvas的层级降低或者动态调整其层级。通过合理调整canvas的层级，可以实现与其他组件的正常交互，提高用户体验。
希望本文对解决微信小程序中canvas层级冲突问题有所帮助。如果你有任何问题或疑惑，欢迎在下方留言。
本文来自极简博客，作者：闪耀之星喵，转载请注明原文链接：微信小程序canvas层级过高与其他非原生组件的层级冲突
