底部tabBar组件

src/components/bar-footer/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { NavBar, Badge, TabBar } from "antd-mobile";
+import styles from "./index.module.scss";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+
+export const TabBarFooter: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { pathname } = location;
+
+  const tabs = [
+    {
+      key: "/",
+      title: "首页",
+      icon: (active: boolean) =>
+        active ? (
+          <i
+            style={{ fontSize: 30, color: "#FF4D4F" }}
+            className="iconfont icon-icon-shouye"
+          ></i>
+        ) : (
+          <i
+            style={{ fontSize: 30, color: "#cccccc" }}
+            className="iconfont icon-waterprint"
+          ></i>
+        ),
+    },
+    {
+      key: "/study",
+      title: "学习",
+      icon: (active: boolean) =>
+        active ? (
+          <i
+            style={{ fontSize: 30, color: "#FF4D4F" }}
+            className="iconfont icon-icon-xuexi"
+          ></i>
+        ) : (
+          <i
+            style={{ fontSize: 30, color: "#cccccc" }}
+            className="iconfont icon-icon-xuexi"
+          ></i>
+        ),
+    },
+    {
+      key: "/member",
+      title: "我的",
+      icon: (active: boolean) =>
+        active ? (
+          <i
+            style={{ fontSize: 30, color: "#FF4D4F" }}
+            className="iconfont icon-icon-wode"
+          ></i>
+        ) : (
+          <i
+            style={{ fontSize: 30, color: "#cccccc" }}
+            className="iconfont icon-icon-wode"
+          ></i>
+        ),
+    },
+  ];
+
+  return (
+    <div className={styles["footer"]}>
+      <TabBar activeKey={pathname} onChange={(value) => navigate(value)}>
+        {tabs.map((item) => (
+          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+        ))}
+      </TabBar>
+    </div>
+  );
+};