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()}

原著是一个有趣的人,若有侵权,请通知删除