tiefen_space_h5/components/BottomNav/index.js

58 lines
2.0 KiB
JavaScript
Raw Normal View History

2024-06-25 20:18:37 +08:00
"use client"
import React from 'react'
import { NavBar, TabBar,Image,Icon } from 'antd-mobile'
import {
AppOutline,
MessageOutline,
UnorderedListOutline,
UserOutline,
} from 'antd-mobile-icons'
import './index.css'
import { usePathname, useRouter } from 'next/navigation'
export default function BottomNav(){
// const history = useHistory()
// const location = useLocation()
// const { pathname } = location
// const setRouteActive = (value) => {
// history.push(value)
// }
const pathname = usePathname()
const router = useRouter()
const setRouteActive = (value) => {
router.push(value)
}
const tabs = [
{
key: '/',
title: '广场',
icon: <div className='w-8 h-8'><Image placeholder="" lazy src="/icons/postblur.png" /></div>,
activeIcon: <div className='w-8 h-8'><Image placeholder="" src="/icons/postfocus.png" /></div>,
2024-06-25 20:18:37 +08:00
},
{
key: '/space',
title: '空间',
icon: <div className='w-8 h-8'><Image placeholder="" lazy src="/icons/space_blur.png" /></div>,
activeIcon: <div className='w-8 h-8'><Image placeholder="" src="/icons/space_focus.png" /></div>,
2024-06-25 20:18:37 +08:00
},
{
key: '/my',
title: '我的',
icon: <div className='w-8 h-8'><Image placeholder="" lazy src="/icons/myblur.png" /></div>,
activeIcon: <div className='w-8 h-8'><Image placeholder="" src="/icons/myfocus.png" /></div>,
2024-06-25 20:18:37 +08:00
},
]
const checkPath = () => {
const pathnames = ["/", "/space", "/my"];
const isActive = pathnames.some(path => path === pathname);
return isActive;
};
2024-06-25 20:18:37 +08:00
return (
<TabBar activeKey={pathname} onChange={value => setRouteActive(value)} className={!checkPath() ? 'hidden' : ''}>
2024-06-25 20:18:37 +08:00
{tabs.map(item => (
<TabBar.Item key={item.key} icon={pathname === item.key ? item.activeIcon : item.icon} title={item.title} className='text-[#ffffff40]'/>
))}
</TabBar>
)
}