微信小程序自定义底部tabbar

1.实现效果

效果图

2.实现原理

自定义tabBar微信开放文档

3.实现步骤

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

图1

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

图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.完整代码（更多代码请移至码云）

https://gitee.com/susuhhhhhh/wxmini_demo

5.部分代码

---

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

      })

    }

  }

})

---