微信小程序自定义底部导航栏层级如何高于canvas 自定义导航栏被画布覆盖解决办法

背景：项目需要自定义底部导航栏。但是上面显示饼状图两个，刚好会覆盖底部导航栏。

效果图：让扫一扫按钮不被饼状图覆盖。

1、搜索发现有《cover-view》这么个标签。可以高于画布，哎这不错，试试。

html：

    

css：
/* 扫一扫 */
.scan{
  width: 200rpx;
  height: 200rpx;
  position: fixed;
  bottom: 30rpx;
  left: 275rpx;
  z-index: 1000;
}

运行不显示，必须要把cover-view这标签及里面的东西放入canvas中才能覆盖上，但是扫一扫这个标签需要在页面底部。用定位fixed不好使。咋整？？？

用cover-view不行，换换。

看到有大神说可以把画布转换成图片，哎，听起来不错试试。

html：
 




js：
data中定义imgSrc变量：
data: {
   imgSrc:'',//图片
},

// 生成图片方法
  canvasToTempImage: function () {
    var that = this
    setTimeout(function() {     ///    定时器一定要加，之前没加图片不出来，闹心半天。
      wx.canvasToTempFilePath({
        canvasId: "pieCanvas1",
        success: (res) => {
          console.log(res)
           let tempFilePath = res.tempFilePath;
           that.setData({
              imgSrc: tempFilePath,
           });
        }
     }, this);
   }, 2000);
   
 },
//调用生成的方法。
我是用的别人的插件做的饼状图。在饼状图设置完数据、显示之后再调用生成图片方法。