成品直播源码，基于Taro多端自定义导航栏

import Taro from '@tarojs/taro'<br>import { View, Text } from '@tarojs/components'<br>import classNames from 'classnames'<br>import './index.scss'<br> <br>export default class TabBar extends Taro.Component {<br>    // 默认参数配置<br>    static defaultProps = {<br>        current: 0,<br>        background: '#fff',<br>        color: '#999',<br>        tintColor: '#6190e8',<br>        fixed: false,<br>        onClick: () => {},<br>        tabList: []<br>    }<br>    constructor(props) {<br>        super(props)<br>        this.state = {<br>            updateCurrent: props.current<br>        }<br>    }<br>    ...<br> <br>    render() {<br>        const { background, color, tintColor, fixed } = this.props<br>        const { updateCurrent } = this.state<br>        <br>        return (<br>            <View className={classNames('taro__tabbar', fixed && 'taro__tabbar--fixed')}><br>                <View className={classNames('taro__tabbar-list', fixed && 'taro__tabbar-list--fixed')} style={{backgroundColor: background}}><br>                    {this.props.tabList.map((item, index) => (<br>                        <View className="taro__tabbar-item taro__tabbar-item--active" key={index} onClick={this.updateTabbar.bind(this, index)}><br>                            <View className="taro__tabbar-icon"><br>                                <Text className="iconfont taro__tabbar-iconfont" style={{color: updateCurrent == index ? tintColor : color}}>{item.icon}</Text><br>                                {/* 圆点 */}<br>                                {!!item.badge && <Text className="taro__badge taro__tabbar-badge">{item.badge}</Text>}<br>                                {!!item.dot && <Text className="taro__badge-dot taro__tabbar-badge--dot"></Text>}<br>                            </View><br>                            <Text className="taro__tabbar-title" style={{color: updateCurrent == index ? tintColor : color}}>{item.title}</Text><br>                        </View><br>                    ))}<br>                </View><br>            </View><br>        );<br>    }<br>}

自定义tabbar也支持自定义背景、颜色、图标，点击选项事件返回索引值

<br><TabBar current={currentTabIndex} background='#f8f8f8' color='#999' tintColor='#6190e8' fixed onClick={this.handleTabbar}<br>    tabList={[<br>        {icon: '\ue627', title: '首页', badge: 8},<br>        {icon: '\ue61e', title: '商品'},<br>        {icon: '\ue605', title: '个人中心', dot: true},<br>    ]}<br>/>