63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { CoverView } from "@tarojs/components";
|
|
import Taro from "@tarojs/taro";
|
|
import {clsx} from "clsx";
|
|
import { useRecoilState, useSetRecoilState } from "recoil";
|
|
import { tabbarModel, tabbarParamModel } from "@/model/tabbar.model";
|
|
import { throttle } from "@tarojs/runtime";
|
|
|
|
import './index.css';
|
|
|
|
const CustomTabBar = () => {
|
|
const [active, setActive] = useRecoilState(tabbarModel);
|
|
|
|
const setParam = useSetRecoilState(tabbarParamModel);
|
|
const handlerClick = throttle((index: number) => {
|
|
if (active == index) return;
|
|
console.log(index, "触发次数");
|
|
setActive(index);
|
|
switch (index) {
|
|
case 1:
|
|
Taro.switchTab({
|
|
url: '/pages/index/index',
|
|
})
|
|
break;
|
|
case 2:
|
|
setParam("自定义页面产品")
|
|
Taro.switchTab({
|
|
url: '/pages/cpage/index',
|
|
})
|
|
break;
|
|
case 3:
|
|
setParam("自定义页面案例")
|
|
Taro.switchTab({
|
|
url: '/pages/cpage/index',
|
|
})
|
|
break;
|
|
case 4:
|
|
Taro.switchTab({
|
|
url: '/pages/user/index',
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}, 1000)
|
|
|
|
return (
|
|
<CoverView className="footer_bg">
|
|
<CoverView className="footer_box">
|
|
<CoverView className={clsx('item', active == 1 ? 'active_text': 'text')} onClick={() => handlerClick(1)}>首页</CoverView>
|
|
<CoverView className={clsx('item', active == 2 ? 'active_text': 'text')} onClick={() => handlerClick(2)}>产品</CoverView>
|
|
<CoverView className={clsx('item', active == 3 ? 'active_text': 'text')} onClick={() => handlerClick(3)}>案例</CoverView>
|
|
<CoverView className={clsx('item', active == 4 ? 'active_text': 'text')} onClick={() => handlerClick(4)}>我的</CoverView>
|
|
</CoverView>
|
|
<CoverView className="safe_bottom"></CoverView>
|
|
</CoverView>
|
|
);
|
|
}
|
|
|
|
CustomTabBar.options = {
|
|
addGlobalClass: true,
|
|
}
|
|
|
|
export default CustomTabBar; |