Taro中自定义小程序tabBar

image.png

第一步

配置 tabBar 配置tabbar的原因是这样才可以在自定义组件中使用 switchTab

tabBar: {
      color: '#bbc0ca',
      selectedColor: '1f83e1',
      backgroundColor: '#feffff',
      borderStyle: 'white',
      list: [
       ...
       // iconPath selectedIconPath 都加一张白底背景
      ]
}

第二步 自定义 tabBar组件

export interface State {
  navItem: number
}
export default class TabBarextends Component {
  state: State
  constructor() {
    super()
    this.state = {
      navItem: 0
    }
  }
  componentWillMount() {
    var navList = [
      'pages/index/index',
      'pages/bills/index',
      '',
      'pages/report/index',
      'pages/my/index',
    ]
    this.setState({
      navItem: navList.indexOf(Taro.getCurrentPages()[0].route)
    })
  }
  switchTab(url, index) {
    Taro.setStorageSync('navItem', index)
    Taro.switchTab({url: url})
  }
  routerPush (index) {
    switch (index) {
      case 0:
        this.switchTab('/pages/index/index', index)
      break
      case 1:
        this.switchTab('/pages/bills/index', index)
      break
      case 2:
        Taro.redirectTo({url:'/pages/remember/index'})
        this.setState({
          navItem: index
        })
      break
      case 3:
        this.switchTab('/pages/report/index', index)
      break
      case 4:
        this.switchTab('/pages/my/index', index)
      break
    }

  }
  render () {
    return (
      <View className='ft-menu'>
        <View className={classnames('nav nav1 ', this.state.navItem === 0 && 'active')} onClick={this.routerPush.bind(this, 0)}>
          <Text className='nav-icon icon1'></Text>
          <Text className='nav-text'>首页</Text>
        </View>
        <View className={classnames('nav nav2 ', this.state.navItem === 1 && 'active')} onClick={this.routerPush.bind(this, 1)}>
          <Text className='nav-icon icon2'></Text>
          <Text className='nav-text'>账单</Text>
        </View>
        <View className={classnames('nav nav3 ')} onClick={this.routerPush.bind(this, 2)}>
          <Text className='nav-text'>记一笔</Text>
        </View>
        <View className={classnames('nav nav4 ', this.state.navItem === 3 && 'active')} onClick={this.routerPush.bind(this, 3)}>
          <Text className='nav-icon icon4'></Text>
          <Text className='nav-text'>报表</Text>
        </View>
        <View className={classnames('nav nav5 ', this.state.navItem === 4 && 'active')} onClick={this.routerPush.bind(this, 4)}>
          <Text className='nav-icon icon5'></Text>
          <Text className='nav-text'>我的</Text>
        </View>
      </View>
    )
  }
}

第三步 隐藏原生tabBar引用组件

componentWillMount () {
    Taro.hideTabBar()
}