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 (
      
        
          
          首页
        
        
          
          账单
        
        
          记一笔
        
        
          
          报表
        
        
          
          我的
        
      
    )
  }
}

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

componentWillMount () {
    Taro.hideTabBar()
}