微信小程序-canvas组件始终位于界面最顶层,无法被覆盖

1,114 阅读1分钟

在微信小程序中,canvas等原生组件的层级是最高的,页面中无论你设置多大的z-index都无法覆盖在其之上。因此,在自己写一个弹窗时canvas组件会浮在弹窗之上,影响功能。

查了一下主要有两种解决思路:

1. 微信官方提供了cover-view原生组件,覆盖在原生组件之上的文本视图

但是我需要在弹窗中使用input组件,而cover-view组件内不支持放置input,所以无法使用这个方法

2. 微信官方提供了将canvas转化为图片的方式–wx.canvasToTempFilePath,这样就可以降级

这个方法,由于我对canvas并不熟悉,所以各种尝试都失败了,一直没办法实现把canvas转为图片,有机会再研究一下。

为了尽快解决这个问题,我使用比较“粗糙”的方法: 当出现弹窗时,用wx:if把canvas隐藏,此时,当取消弹窗时,canvas无法自动重新出现,所以需要在取消弹窗的方法里重新绘制canvas。