一、app.js中进行基础设置，custom: true，加入usingComponents，设置自定义customTabBar组件的路径。
app.js 内容

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文件，在这个文件夹中就可以设置自定义tab的内容和样式了。
index.js 内容

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 内容

.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实现后有一个问题，点击两下才能激活选中样式，需要在链接页面中加入下面的代码。
home.js 内容

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

cart.js 内容

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