在微信小程序中,canvas等原生组件的层级是最高的,页面中无论你设置多大的z-index都无法覆盖在其之上。因此,在自己写一个弹窗时canvas组件会浮在弹窗之上,影响功能。
查了一下主要有两种解决思路:
1. 微信官方提供了cover-view原生组件,覆盖在原生组件之上的文本视图
但是我需要在弹窗中使用input组件,而cover-view组件内不支持放置input,所以无法使用这个方法
2. 微信官方提供了将canvas转化为图片的方式–wx.canvasToTempFilePath,这样就可以降级
这个方法,由于我对canvas并不熟悉,所以各种尝试都失败了,一直没办法实现把canvas转为图片,有机会再研究一下。
为了尽快解决这个问题,我使用比较“粗糙”的方法: 当出现弹窗时,用wx:if把canvas隐藏,此时,当取消弹窗时,canvas无法自动重新出现,所以需要在取消弹窗的方法里重新绘制canvas。