微信小程序自定义底部 tabbar的两个方法

这里记一下微信小程序自定义 tabbar 的方法 ，一个是官方给出的 。 一个是我在尝试的过程中想到的。

官方文档给了一个自定义tabbar 的方法 。

这个方法需要注意一下几点 ：

• 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
• 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。
• 与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。
• 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。
• 注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。可参考底部的代码示例。

官方自定义 tabbar 过程 ：

1. 配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整（兼容低版本）。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
示例：

{
  "tabBar": {
    "custom": true,   // 表示使用自定义 tabbar 
    "color": "#000000",  // 可以不填 ， 兼容低版本
    "selectedColor": "#000000",  // 可以不填 ， 兼容低版本
    "backgroundColor": "#000000",  // 可以不填 ， 兼容低版本
    // 以下必填
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/user/user",
      "text": "我的"
    }]
  },
}

2. 添加 tabBar 代码文件

在根目录下增加文件(必须一模一样） ：
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。
这里也仅渲染即可 ， 点击跳转等系统会自动跳转

4. getTabbar

这也是必不可少的一步 ， 因为官方给的这个方法 ，不需要我们定义后再页面使用 。而是直接就会显示的。
而需要注意的是每个tabbar页面下的 tababr 是不一样的
也就是说可能出现点击了一个tabbarItem , 页面跳转了 ，但是 tabbar 选择的却不是当前页面对应的。

为解决这个问题 ，需要在每个 有 tabbar 的页面的 js 文件中增加

  onShow(){
    this.getTabBar().setData({
      curI: 1
    })
  }

其中 this.getTabBar() 获取当前页面下的 tabBar组件
然后调用组件的setData() 方法，修改数据 ，改变tabbar 当前选择的项

使用传统自定义组件方法

这个方法的思路是写一个组件代替tabbar组件 。 但跳转时还是使用 wx.switchTabbar() . 因此需要配置好 tabbar 页面 ，然后隐藏原生 tabbar .

1. 配置信息

示例：

{
  "tabBar": {
   // 以下必填
    "list": [{
      "pagePath": "pages/index/index",
    }, {
      "pagePath": "pages/user/user",
    }]
  },
  "usingComponents": {
    "myTabbar":"./components/Tabbar/Tabbar"   // 全局配置自定义tabbar组件， 也可以在需要使用的页面局部配置
  }
}

2. 隐藏原生 tabbar

在 app.js 里全局隐藏原生的 tabbar

App({
  onLaunch() {
    wx.hideTabBar()
  }
  })

3. 自定义 tabbar 组件

  首页
  我的

cover-view层级比较高 ，
使用自定义属性绑定路由，在点击时跳转

  properties: {
    tabIndex:{  // 接收页面传入的数据
      type:String,
      value:'1'
    }
  },
  methods: {
    tabChange(e) {
      const url = e.target.dataset.url
      wx.switchTab({
        url
      })
    }
  }

4. 使用自定义 tabbar组件