微信小程序自定义底部tabbar

1.实现效果

2.实现原理

自定义tabBar微信开放文档

3.实现步骤

1.在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

2.在代码根目录下添加入口文件

3. 编写 tabBar 代码
用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

4.The last but the most important
要在这些自定义tabbar页的onShow中调用以下代码：

 onShow() {
     //自定义的tabbar
     if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },

4.部分代码

custom-tab-bar/index.js

Component({
  data: {
    selected: 0,
    color: "#333333",
    selectedColor: "#6B1F72",
    list: [{
      pagePath: "/pages/cal/index",
      iconPath: "/img/tabbar/icon_index.png",
      selectedIconPath: "/img/tabbar/icon_index_sel.png",
      text: "首页"
    }, {
      pagePath: "/pages/charts/index",
      iconPath: "/img/tabbar/icon_order.png",
      selectedIconPath: "/img/tabbar/icon_order_sel.png",
      text: "饼图"
    }, {
      pagePath: "/pages/addImg/index",
      iconPath: "/img/tabbar/icon_safe.png",
      selectedIconPath: "/img/tabbar/icon_safe_sel.png",
      text: "上传图片"
    }, {
      pagePath: "/pages/sendCode/index2",
      iconPath: "/img/tabbar/icon_my.png",
      selectedIconPath: "/img/tabbar/icon_my_sel.png",
      text: "验证码"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

5.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~