58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
"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="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/postblur.png"} /></div>,
|
|
activeIcon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/postfocus.png"} /></div>,
|
|
},
|
|
{
|
|
key: '/space',
|
|
title: '空间',
|
|
icon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/space_blur.png"} /></div>,
|
|
activeIcon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/space_focus.png"} /></div>,
|
|
},
|
|
{
|
|
key: '/my',
|
|
title: '我的',
|
|
icon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/myblur.png"} /></div>,
|
|
activeIcon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/myfocus.png" }/></div>,
|
|
},
|
|
]
|
|
const checkPath = () => {
|
|
const pathnames = ["/", "/space", "/my"];
|
|
const isActive = pathnames.some(path => path === pathname);
|
|
return isActive;
|
|
};
|
|
return (
|
|
<TabBar activeKey={pathname} onChange={value => setRouteActive(value)} className={!checkPath() ? 'hidden' : ''}>
|
|
{tabs.map(item => (
|
|
<TabBar.Item key={item.key} icon={pathname === item.key ? item.activeIcon : item.icon} title={item.title} className='text-[#ffffff40]'/>
|
|
))}
|
|
</TabBar>
|
|
)
|
|
} |