taro 自定义底部

tabBar.jsx

import Taro, {
    Component
} from '@tarojs/taro'
import {
    CoverView, CoverImage
} from '@tarojs/components'
// import Intellect from '../assets/intellect.png'
import './tabBar.scss'

class TabBar extends Component {

    state = {
        "color": "#999999",
        "selectedColor": "#777eff",
        "borderStyle": "white",
        custom: true,
        list: [
            {
                selectedIconPath: '../component/statics/img/index_h.png',
                iconPath: '../component/statics/img/index.png',
                pagePath: '../../pages/index/index',
                text: '首页'
            },
            {
                selectedIconPath: '../component/statics/img/tabMy_h.png',
                iconPath: '../component/statics/img/tabMy.png',
                pagePath: '../../pages/my/my',
                text: '我的'
            }
        ]
    }

    switchTab = (item) => {
        const url = item.pagePath
        Taro.switchTab({
            url
        })
    }

    // jumpIntellect = () => {
    //     Taro.navigateTo({ url: '/pages/intellect/intellect' })
    // }

    componentWillMount(){
        this.setState({
            selected:this.props.ind
            // selected:1
        })
    }
    componentDidMount() {
        
    }

    // 自定义 tabBar的页面
    render() {
        return (
            <CoverView className='tab-bar'>
                <CoverView className='tab-bar-wrap'>
                    {
                        this.state.list.map((item, index) => {
                            return <CoverView className='tab-bar-wrap-item'
                                onClick={this.switchTab.bind(this, item)}
                                data-path={item.pagePath}
                                key={item.text}
                            >
                                <CoverImage className='tab-bar-wrap-item-icon' src={this.state.selected === index ? item.selectedIconPath : item.iconPath} />
                                <CoverView className='tab-bar-wrap-item-btn'
                                    style={{ color: this.state.selected === index ? this.state.selectedColor : this.state.color }}
                                >{item.text}
                                </CoverView>
                            </CoverView>
                        })
                    }
                </CoverView>
                {/* <CoverImage className='intellect-icon' src={Intellect} onClick={this.jumpIntellect} /> */}
            </CoverView>
        )
    }
}
export default TabBar

.tab-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
    font-size: 32px;
    background: transparent; 
}
.tab-bar-wrap {
  display: flex;
  height: 110px;
  box-shadow: -6px 0px 8px 0px 
        #dfdfdf;
  margin-top: 40px;
  background: #ffffff;
}
.tab-bar-wrap-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.tab-bar-wrap-item-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.tab-bar-wrap-item-btn {
  font-size: 24px;
  line-height: 42px;
  color: #999999;
  background: #ffffff;
}
  

使用
index.jsx

import Taro, { Component } from '@tarojs/taro'
import {
  View,
  Text
} from '@tarojs/components'
//引入
import TabBar from "../../tabBar/tabBar";
import { AtButton,AtIcon } from 'taro-ui'
export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      selected:0
    
  }
}
  componentWillMount () { 
    if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
      this.$scope.getTabBar().$component.setState({
        selected: 0
      })
    }
   
  }

  componentDidMount() {
   }
  
  

  componentWillUnmount () {
     }

  componentDidShow () { 
    
  }

  componentDidHide () { }

  config = {
    navigationBarTitleText: '首页',
    
  }

  toList=()=>{
    Taro.navigateTo({
      url: '/pages/list/list'
    })
 
  }
  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
       <TabBar ind={this.state.selected} />
      </View>
    )
  }
}