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

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

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

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

html：
<cover-view>
    <button class="scan" style="background:url('{
  
  {storeImgUrl}}scan.png') no-repeat;background-size:100%;" bindtap='getScancode'></button>
</cover-view>
css：
/* 扫一扫 */
.scan{
  width: 200rpx;
  height: 200rpx;
  position: fixed;
  bottom: 30rpx;
  left: 275rpx;
  z-index: 1000;
}

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

用cover-view不行，换换。

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

html：
 <canvas hidden='{
  
  {imgSrc}}' canvas-id="pieCanvas1" class="canvas" style="height:300px;width:{
  
  {width}}px;" bindtouchstart="touchHandler1"> </canvas>

<image hidden='{
  
  {!imgSrc}}' src="{
  
  {imgSrc}}" style="width:{
  
  {width}}px;height:300px" />


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);
   
 },
//调用生成的方法。
我是用的别人的插件做的饼状图。在饼状图设置完数据、显示之后再调用生成图片方法。

今天的文章微信小程序自定义底部导航栏层级如何高于canvas 自定义导航栏被画布覆盖解决办法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。