tiefen_space_h5/components/BottomNav/index.js

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>
)
}