小程序 canvas 自定义底部导航栏

一、说明

小程序层级canvas最高，会有图表遮挡菜单栏的问题，这里写个canvas菜单看看能否调整图层，
详细文档https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

二、静态样

Page({
  data:{
    width:0,
    height:50
  },
  onShow: function() {
    var that = this ;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        that.data.width = res.screenWidth
      },
    })

    //使用wx.createContext获取绘图上下文context    
    var context = wx.createCanvasContext('canvas')

    //第二步绘制这里我们绘制个矩形 
    //x, y, widht, height
    context.setFillStyle('white');
    context.fillRect(0, 0, that.data.width, that.data.height);

    context.beginPath();

    //开始一个新的路径  
    context.setFillStyle('red');
    context.fillRect(that.data.width / 7, 0, 60, 50)

    context.rect(that.data.width / 7, 5, 60, 20)
    
    context.stroke();

    context.rect(that.data.width / 7, 30, 60, 20)
    context.stroke();

    context.setFontSize(16)

    //开始一个新的路径      
    context.setFillStyle('yellow');
    context.fillRect(that.data.width * 3 / 7  , 0, 60 , 50)

    context.rect(that.data.width * 3 / 7, 5, 60, 20)
    context.stroke();

    context.rect(that.data.width * 3 / 7, 30, 60, 20)
    context.stroke();

    //开始一个新的路径      
    context.setFillStyle('blue');
    context.fillRect(that.data.width * 5 / 7  , 0, 60 , 50)

    context.rect(that.data.width * 5 / 7, 5, 60, 20)
    context.stroke();

    context.rect(that.data.width * 5 / 7, 30, 60, 20)
    context.stroke();

    context.draw();

  },

})

如同所示：

image.png

三、添加样式和点击事件

1.index.wxml

<view class="page-body">
  <view class="page-body-wrapper">
    <canvas canvas-id="canvas" class="canvas" bindtap='canvasTouch'></canvas>
  </view>
</view>

2.index.wxss

.canvas{
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 10vh;
}

3.index.js

Page({
  data: {
    width: 0,
    height: 50,
    urlArr: ['url1', 'url2', 'url3']
  },
  onShow: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        that.data.width = res.screenWidth
      },
    })

    //使用wx.createContext获取绘图上下文context    
    var context = wx.createCanvasContext('canvas')

    //第二步绘制这里我们绘制个矩形 
    //x, y, widht, height
    context.rect(0, 0, that.data.width, that.data.height);

    context.beginPath();
    context.setFontSize(14);

    //border
    context.setFillStyle('#f2f2f2');
    context.setLineWidth(0.15);
    context.moveTo(0, 0);
    context.strokeRect(0, 0, that.data.width, 0);

    //首页
    context.setFillStyle('#3a78fe');
    context.drawImage("../images/home.png", that.data.width / 7, 5, 60, 36) //绘制图片
    context.fillText('首页', that.data.width / 7 + 15, 50, 60, 20)

    //功能1
    context.setFillStyle('black')
    context.drawImage("../images/home.png", that.data.width * 3 / 7, 5, 60, 36) //绘制图片
    context.fillText('功能1', that.data.width * 3 / 7 + 15, 50, 60, 20)

    //功能2
    context.drawImage("../images/home.png", that.data.width * 5 / 7, 5, 60, 36) //绘制图片
    context.fillText('功能2', that.data.width * 5 / 7 + 15, 50, 60, 20)

    context.draw();

  },
  canvasTouch: function(e) {
    var that = this;
    console.log("url>>>")
    //这里只对x做判定
    var x = e.touches[0].pageX;
    if (x >= that.data.width / 7 && x < that.data.width / 7 + 50) {
      console.log(this.data.urlArr[0]);
    }
    if (x >= that.data.width * 3 / 7 && x < that.data.width * 3 / 7 + 50) {
      console.log(this.data.urlArr[1]);
    }
    if (x >= that.data.width * 5 / 7 && x < that.data.width * 5 / 7 + 50) {
      console.log(this.data.urlArr[2]);
    }
  }

})

最后的样子是这样的，希望能帮到你

image.png

-end-