微信小程序自定义底部 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 class="tab-bar" bindtap="tabChange">
  <cover-view data-url="../index/index" class="tab-item {
         
  {tabIndex == 1? active :}}">首页</cover-view>
  <cover-view data-url="../user/user" class="tab-item {
         
  {tabIndex == 2? active :}}">我的</cover-view>
</cover-view>

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

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

4. 使用自定义 tabbar组件

<myTabbar tabIndex="1"></myTabbar>