小程序自定义tabbar

小程序自定义tabbar从基础库2.5.0开始支持，如果是低于此版本的基础库则需要做低版本兼容处理了

虽然小程序自带的tabbar已经可以覆盖大部分的开发需求了，但是在某些特定的场合下我们还是需要自定义tabbar

以下为使用流程

1、配置相关信息

在app.json中新增一项：名字为tabbar，需要指定custom字段为true，list等其余项目也需要补全。

"tabBar": {
    "custom": true,
    "color": "#515151",
    "selectedColor": "#d81e06",
    "list": [
      {
        "pagePath": "pages/music/music",
        "text": "发现",
        "iconPath": "images/tabbar/music.png",
        "selectedIconPath": "images/tabbar/music_selected.png"
      }, {
        "pagePath": "pages/playing/playing",
        "text": "乐库",
        "iconPath": "images/tabbar/playing.png",
        "selectedIconPath": "images/tabbar/playing_selected.png"
      }, {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/tabbar/my.png",
        "selectedIconPath": "images/tabbar/my_selected.png"
      }
    ]
  },
  "usingComponents":{}

 2、添加tabbar文件夹

在项目的根目录建立文件夹，名字为custom-tab-bar（注：只能用这个名字）

├── custom-tab-bar
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   ├── index.wxss
├── images
│   └── tabbar
│       ├── ...
│       └── ...
├── pages
│   ├── music
│       ├── ...
│       └── ...
│   ├── playing
│   └── me
├── utils
│   └── utils.js
├── app.js
├── app.json
└── app.wxss

3、编写自定义tabbar代码

// custom-tab-bar/index.js
Component({
  data: {
    "selected": 0,
    "color": "#515151",
    "selectedColor": "#d81e06",
    "list": [
      {
        "pagePath": "/pages/music/music",
        "text": "发现",
        "iconPath": "/images/tabbar/music.png",
        "selectedIconPath": "/images/tabbar/music_selected.png"
      }, 
      {
        "pagePath": "/pages/playing/playing",
        "text": "乐库",
        "iconPath": "/images/tabbar/playing.png",
        "selectedIconPath": "/images/tabbar/playing_selected.png"
      }, 
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/images/tabbar/my.png",
        "selectedIconPath": "/images/tabbar/my_selected.png"
      }
    ]
  },
  attached() {
  },
  /**
   * 方法
   */
  methods: {
    // 点击跳转方法
    switchTab(e){
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url: url
      })
      this.setData({
        selected:data.index
      })
    }
  }
})

<!--custom-tab-bar/index.wxml-->
<!--自定义tabbar页面-->
<cover-view class="tab_bar">
  <cover-view class="tab_bar_border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index"  class="tab_bar_item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

/* custom-tab-bar/index.wxss */
.tab_bar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96rpx; /* 48px */
  background: #FAFBFD;
  opacity: 0.9;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab_bar_border{
  background: #E6E7E8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rpx; /* 1px */
  transform: scaleY(0.5);
}
.tab_bar_item{
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab_bar_item cover-image{
  width: 54rpx; /* 27px */
  height:  54rpx; /* 27px */
}

.tab-bar-item cover-view {
  font-size: 20rpx;
}

 注意点：

1、custom-tab-bar/index.js内的list对象的路径要以绝对路径/开始写，而在app.json中的tabbar对象中的list不需要。

2、所有 tab 页的 json 里需声明 usingComponents ，也可以写在app.json内全局使用 。

　代码编写到这里完结，这时候在微信开发者工具进行预览，自定义tabbar已经生效了

　点击tabbar，可以看到pages页面已经发生了改变，但是下面的icon图标着色还是存在问题，如图

 

　　经过查阅微信官方开发文档自定义tabbar一项

 

 注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar接口获取组件实例，并调用 setData 更新选中态。

4、补充代码

在每一个自定义tabbar的对应页面中的onShow生命周期钩子中，添加代码

  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0 //自定义tabbar的下标是从0开始计算
      })
    }
  }

这里的selected是填写tabbar对应的位置，从0开始计算

添加代码后重新编译，可以看到现在显示是正常的了

 

　细心的可能会注意到，在不同的icon切换中，自定义tabbar会闪烁一下，这个问题可以通过注释custom-tab-bar/index.js的this.setData解决

  methods: {
    // 点击跳转方法
    switchTab(e){
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url: url
      })
      
      /*
      this.setData({
        selected:data.index
      })
      */
    
    }
  }

自定义小程序tabbar需要注意的点

1、根目录文件夹必须为custom-tab-bar

2、必须要在每一个tabbar页面的onShow添加setData设置tab的选中态