69 lines
1.4 KiB
JavaScript
69 lines
1.4 KiB
JavaScript
|
import React ,{FC} from "react";
|
||
|
|
import { NavBar, TabBar } from 'antd-mobile'
|
||
|
|
import {
|
||
|
|
Route,Routes,
|
||
|
|
useLocation,
|
||
|
|
MemoryRouter as Router,
|
||
|
|
useNavigate,
|
||
|
|
} from 'react-router-dom'
|
||
|
|
import {
|
||
|
|
AppOutline,
|
||
|
|
MessageOutline,
|
||
|
|
UnorderedListOutline,
|
||
|
|
UserOutline,
|
||
|
|
} from 'antd-mobile-icons'
|
||
|
|
export function Bottom (){
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const location = useLocation()
|
||
|
|
const { pathname } = location
|
||
|
|
|
||
|
|
const setRouteActive = (value) => {
|
||
|
|
navigate(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
const tabs = [
|
||
|
|
{
|
||
|
|
key: '/home',
|
||
|
|
title: '首页',
|
||
|
|
icon: <AppOutline />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/todo',
|
||
|
|
title: '待办',
|
||
|
|
icon: <UnorderedListOutline />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/message',
|
||
|
|
title: '消息',
|
||
|
|
icon: <MessageOutline />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/me',
|
||
|
|
title: '我的',
|
||
|
|
icon: <UserOutline />,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
|
||
|
|
{tabs.map(item => (
|
||
|
|
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
|
||
|
|
))}
|
||
|
|
</TabBar>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export function Home() {
|
||
|
|
return <div>首页</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Todo() {
|
||
|
|
return <div>待办</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Message() {
|
||
|
|
return <div>消息</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PersonalCenter() {
|
||
|
|
return <div>我的</div>
|
||
|
|
}
|