微信小程序-canvas层级太高

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

最近在开发微信小程序的时候，遇到了一个问题，困扰了很久。小程序用的Vant开发，在实现图表汇总页面时，点击下拉框之后，canvas盖不住，canvas在最上面展示，于是百度了很久，最后还是解决不太完美，但是记录一下吧，希望有更好的解决办法的友友们可以给点意见。问题如下图：

QQ图片20211111154025.png

造成这个问题的原因是因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。想试着用cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cover-image，button。不可以使用input组件，但是vant组件的内部代码改变不了。所以这个方法靠不住。

后面查阅文档之后，发现可以把canvas转成图片，将canvas隐藏，这样就可以避免。

于是决定监听dropdown下拉框的打开和关闭事件，在打开时候，将canvas转成图片，关闭下拉框的时候再展示canvas。下面看下具体的代码吧。

一：html

 <van-dropdown-menu>
    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" bind:change="changeYear" 
        bind:open="dropOpen" bind:close="dropClose" />
</van-dropdown-menu>

其中下拉框用到了“dropOpen”和“dropClose”方法

 <canvas hidden="{{imgSrc1}}" canvas-id="chart1" style="width: 100%; height: 400rpx"></canvas>
 <image hidden='{{!imgSrc1}}' src="{{imgSrc1}}" style="width: 100%; height: 400rpx" />

/**
 * 页面的初始数据
 */
data: {
    option1: [],
    value1: '',
    imgSrc1: '',
    dropShow: false,
}

// 下拉框打开，隐藏canvas
dropOpen() {
    this.canvasToTempImage('chart1');
    this.setData({
        dropShow: true,
    })
},

// 下拉框关闭，展示canvas
dropClose() {
    this.setData({
        dropShow: false,
        imgSrc1: "",
    })
},

// canvas转图片
canvasToTempImage(dom) {
    wx.canvasToTempFilePath({
        canvasId: dom,
        success: (res) => {
            let tempFilePath = res.tempFilePath && res.tempFilePath.replace("http", "https");
            if (dom == 'chart1') {
                this.setData({
                    imgSrc1: tempFilePath,
                });
            } 
        }
    }, this);
},

以上就是解决canvas层级太高的解决办法，不足就是在打开关闭下拉框的时候会稍一闪而过效果，略微有点明显吧。记录一下。温故而知新！