底部tab组件的封装

最新推荐文章于 2024-09-09 09:35:48 发布

water?tree

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量76

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/xytpp/article/details/131412676

版权

//Home.js

import React,{useState,useEffect} from 'react'
import {  TabBar } from 'antd-mobile'
import { Tabs, Badge } from 'antd-mobile'
import {useSelector} from 'react-redux'
import {UserOutline,AppstoreOutline} from 'antd-mobile-icons'
import { ShoppingCartO,WapHomeO  } from '@react-vant/icons'
import './Home.scss'
import { Search } from 'react-vant';
import {Outlet,useNavigate,useLocation} from 'react-router-dom'
export default function Home() {
  const [value, setValue] = useState('');
  const navigate=useNavigate()
  const state=useSelector(state=>state)
  console.log(state);
  const location=useLocation()
  useEffect(()=>{
    //保证刷新页面 url和tab匹配
    setActive(location.pathname)
  },[])
  function changeTab(key){
    console.log(key);
    //修改active
    setActive(key)
    //跳转路由界面  路由动态
    navigate(key)
  }

  const [active, setActive] = useState('/')
  return (
    <div className='container1'>
      <Outlet></Outlet>

      <div className="footer">
        <TabBar activeKey={active} onChange={changeTab}>
            
            <TabBar.Item key={'/'} icon={ <WapHomeO  />} title={'首页'} />
            <TabBar.Item key={'/cate'} icon={ AppstoreOutline } title={'分类'} />
            <TabBar.Item key={'/car'} icon={ <ShoppingCartO  />} badge={state.car.reduce((init,item)=>init+item.sum,0)} title={'购物车'} />
            <TabBar.Item key={'/my'} icon={ UserOutline}  title={'个人'} />
        </TabBar>

      </div>
       
    </div>
  )
}


.container1{
    width: 100%;
    height: 100%;

    
    .footer{
        position: fixed;
        bottom: 0;
        left:0;
        right: 0;
        background-color: #fff;
    }
}



//router.js


import Car from "./components/Car"
import Cate from "./components/Cate"
import First from "./components/First"
import Home from "./components/Home"
import My from "./components/My"
import Search from "./components/Search"


const routes=[
    
    {
        path:'/',
        element:<Home></Home>, 
        children:[
            {path:'/',element:<First></First>},
            {
                path:'/cate',element:<Cate></Cate>
            },
            {
                path:'/car',element:<Car></Car>
            },
            {
                path:'/my',element:<My></My>
            }

        ] 
    },
    {
        path:'/search',
        element:<Search></Search>
    }
   
        
]

export default routes