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

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

你可能感兴趣的:(前端,Taro,小程序开发,H5,移动端)