详情参考微信小程序文档原生组件
1、为什么canvas组件总是会在最上层?
由于canvas组件是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。
2、 如何解决canvas层级最高问题?
方法一:用原生组件覆盖原生组件
为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。
比如:cover-view
只支持嵌套 cover-view
、cover-image
、button
。
方法二:让canvas在图片和canvas间切换
因为cover-view
只支持嵌套 cover-view
、cover-image
、button
,对于canvas上显示弹窗中的input之类的需求就不太符合。
思路:在data里定义了一个canvasImg,然后在wxml中判断,是否这个值是否有效,若有效,canvas隐藏;否则,显示canvas。然后在页面渲染canvas时,执行了wx.canvasToTempfilepath方法,将雷达图转化为图片。此时给canvasImg赋值,canvas隐藏,image显示。下面是具体实现代码:
wxml:
<view class="canvas-content">
<canvas
canvas-id="myCanvas"
wx:if="{{!canvasImg}}"
style="width: 260px; height: 180px;">
</canvas>
<image wx:else src="{{canvasImg}}" style="width: 260px; height: 180px;" />
</view>
js:
// 需要让 弹窗等 出现在canvas上的事件
handleCanvarToImg() {
var that=this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 260,
height: 180,
canvasId: 'myCanvas',
success: function(res) {
that.setData({ canvasImg: res.tempFilePath});
}
});
},
// 最后弹窗等消失时,触发的事件中需将canvasImg初始化(=null)