微信小程序 自定义底部导航栏(tabBar)

微信小程序 是支持自定义导航栏的，可查看微信小程序官方文档，学习自定义tabBar的使用

1.创建自定义导航栏 目录和文件

注意:

• 新建Component
• 名字为 “ index”
• 与pages同级

index.js文件

// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#999999",
    selectedColor: "#EE3D42",
    listTab: [
      {
        pagePath: "/pages/index/index",
        text: "导航一",
        iconPath: "/static/guide_no.png",
        selectedIconPath: "/static/guide_active.png"
      },
      {
        pagePath: "/pages/calculate/calculate",
        text: "导航二",
        iconPath: "/static/calculate_no.png",
        selectedIconPath: "/static/calculate_active.png"
      },
      {
        pagePath: "/pages/personal/personal",
        text: "个人中心",
        iconPath: "/static/personal_no.png",
        selectedIconPath: "/static/personal_active.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      wx.switchTab({ url });
      //this.setData({
       // selected: data.index
      //})
    }
  }
})
<