一、app.js中進(jìn)行基礎(chǔ)設(shè)置，custom: true，加入usingComponents，設(shè)置自定義customTabBar組件的路徑。
app.js 內(nèi)容

tabBar: {
      custom: true,
      color: '#999',
      selectedColor: '#B90220',
      backgroundColor: "#000",
      list: [{
        pagePath: "pages/home/home",
        iconPath: "./assets/images/icon-home.png",
        selectedIconPath: "./assets/images/icon-home-a.png",
        text: "首頁"
      },{
        pagePath: "pages/cart/cart",
        iconPath: "./assets/images/icon-cart.png",
        selectedIconPath: "./assets/images/icon-cart-a.png",
        text: "購物車"
      }],
      usingComponents: {
        customtabbar: "custom-tab-bar/index"
      }

二、在src文件夾下添加 custom-tab-bar 文件夾，并在文件夾下建立index.js、index.scss文件，在這個(gè)文件夾中就可以設(shè)置自定義tab的內(nèi)容和樣式了。
index.js 內(nèi)容

import Taro, { Component } from '@tarojs/taro'
import { CoverView, CoverImage } from '@tarojs/components'
import './index.scss'
import IconHome from '@assets/images/icon-home.png'
import IconHomeA from '@assets/images/icon-home-a.png'
import IconGoods from '@assets/images/icon-cart.png'
import IconGoodsA from '@assets/images/icon-cart-a.png'

export default class customTabBar extends Component {

    state = {
        selected: '',
        color: '#999',
        selectedColor: '#B90220',
        backgroundColor: "#000",
        list: [{
            pagePath: "/pages/home/home",
            iconPath: IconHome,
            selectedIconPath: IconHomeA,
            text: "首頁"
        },{
            pagePath: "pages/cart/cart",
            iconPath: "./assets/images/icon-cart.png",
            selectedIconPath: "./assets/images/icon-cart-a.png",
            text: "購物車"
        }],
        num: 9
    }

    render() {
        return (
            <CoverView className='custom-tab'>
                {
                    this.state.list.map((item, index) => {
                        return <CoverView className='custom-tab-item' onClick={this.switchTab.bind(this, index)} data-path={item.pagePath} key={index}>
                            <CoverImage className='custom-tab-item-img' src={this.state.selected === index ? item.selectedIconPath : item.iconPath} />
                            {index === 1 ? <CoverView className='custom-tab-item-num'>{this.state.num}</CoverView> : ''}
                            <CoverView className='custom-tab-item-text' style={{ color: this.state.selected === index ? this.state.selectedColor : this.state.color }}>
                                {item.text}
                            </CoverView>
                        </CoverView>
                    })
                }
            </CoverView>
        )
    }

    switchTab = (index) => {
        const url = this.state.list[index].pagePath
        Taro.switchTab({
            url: url
        })
        let that = this
        that.setState({
            selected: index
        })
    }
}

index.scss 內(nèi)容

.custom-tab {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 58Px;
  border-radius: 18px 18px 0 0;
  background-color: #000;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &-img {
      margin: 5PX auto 0;
      width: 18PX;
      height: 18Px;
    }

    &-num {
      min-width: 12Px;
      height: 12Px;
      border-radius: 12Px;
      font-size: 10Px;
      line-height: 12Px;
      background-color: #d51b51;
      box-shadow: 0 0 4Px rgba(0, 0, 0, 0.5);
      color: #fff;
      position: absolute;
      z-index: 5;
      top: 15%;
      right: 30%;
      text-align: center;
    }

    &-text {
      margin-top: 5Px;
      font-size: 10Px;
    }
  }
}

三、自定義的tabBar實(shí)現(xiàn)后有一個(gè)問題，點(diǎn)擊兩下才能激活選中樣式，需要在鏈接頁面中加入下面的代碼。
home.js 內(nèi)容

componentDidShow() {
        if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
            this.$scope.getTabBar().$component.setState({selected: 0})
        }
    }

cart.js 內(nèi)容

componentDidShow() {
        if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
            this.$scope.getTabBar().$component.setState({selected: 1})
        }
    }