微信小程序tabBar实现

1、navbar组件

import Taro, { getCurrentPages } from '@tarojs/taro'
import React from 'react'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'


function Index(props) {
    // 1、数据
    const navBarList = [
        { title: '线索',path:'/pages/clue/index', text: 8 },
        { title: '项目',path:'/pages/project/index', },
        { title: '个人中心',path:'/pages/my/index', dot: true }
    ]
    // 获取当前页面信息  pages[0].__route__ :当前页面路由
    let pages = getCurrentPages()

   console.log(pages[0].__route__,'router')

    // 2、事件
    const handleClick = (value) => {
        console.log(value,'value')
        Taro.navigateTo({
            url:navBarList[value].path
        })

    }

    // 3、标签
    return (
        <View>
            <AtTabBar
              tabList={navBarList}
              fixed
              onClick={handleClick}
              current={props.current}
            />
        </View>
    )
}

export default Index

2、navbar组件在页面中引入

// import Taro, from '@tarojs/taro'
import React from 'react'
// 取存在reducer中的值
import { View } from '@tarojs/components'
import NavBar from '../components/navbar/index'

import './index.scss'

function Index() {
  // current传值给navbar
const current:number = 2

  return (
    <View className='index'>

      个人中心
      <NavBar current={current} />

    </View>
  )
}

export default Index