Taro固定底部切换AtTabBar

首先引入taro-ui，加入标签AtTabBar

import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import './index.scss'

标题为：个人中心，显示下标为3

config = {
    navigationBarTitleText: '个人中心'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 3
    }
  }

点击底部按钮根据下标切换路径

handleClick (value) {
    this.setState({
      current: value
    })
    switch (value) {
      case 0:
          Taro.redirectTo({
              url: `/pages/index/index`
          })
          break;
      case 1:
          Taro.redirectTo({
              url: `/pages/pinglun/index`
          })
          break;
      case 2:
          Taro.redirectTo({
              url: `/pages/yindao/index`
          })
          break;
      case 3:
          Taro.redirectTo({
              url: `/pages/wode/index`
          })
          break;            
      default:
          break;
    }    
  }

AtTabBar==》fixed:固定底部
onClick==》点击时执行handleClick事件

return (    
      <View className='Mycenter'>
        <AtTabBar fixed tabList={[
            { title: '首页', iconType: 'home'},
            { title: '评论', iconType: 'message' },
            { title: '引导', iconType: 'folder'},
            { title: '我的', iconType: 'user'}
          ]}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
      </View>
    )

Tari UI组件官网，挺不错的插件