wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BottomNav从push改为replace

This commit is contained in:
yezian 2024-08-13 20:00:46 +08:00
parent 96a72cc7ac
commit bcbcf9b489
1 changed files with 102 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
components/BottomNav/index.js
View File

@ -1,58 +1,103 @@
"use client"
"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>
)
}
import React from "react";
import { TabBar, Image } from "antd-mobile";
import "./index.css";
import { usePathname, useRouter } from "next/navigation";
export default function BottomNav() {
const pathname = usePathname();
const router = useRouter();
const setRouteActive = (value) => {
router.replace(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>
);
}