底部tabbar子组件

src/componments/TabbarCom/index.jsx

@@ -0,0 +1,35 @@
+import { View } from "@tarojs/components";
+import { AtAvatar, AtTag, AtIcon, AtTabBar, AtButton } from "taro-ui";
+import Taro from "@tarojs/taro";
+import react from "react";
+
+const TabbarCom = (props) => {
+  const [active, setActive] = react.useState(props?.active ?? 0);
+
+  return (
+    <View className="tabbbar">
+      <AtTabBar
+        tabList={[
+          { title: "首页", iconType: "home" }, //, text: "new"
+          // { title: "活动", iconType: "camera" },
+          { title: "我的", iconType: "user" }, //, text: "100", max: 99
+        ]}
+        onClick={(current) => {
+          setActive(current)
+          if (current === 0) {
+            Taro.redirectTo({
+              url: "/pages/index/index",
+            });
+          }else{
+            Taro.redirectTo({
+              url: "/pages/my/index",
+            });
+          }
+        }}
+        current={active}
+      />
+    </View>
+  );
+};
+
+export default TabbarCom;

src/componments/TabbarCom/index.scss

@@ -0,0 +1,11 @@
+.tabbbarDiv {
+    width: 100%;
+    height: 140px;
+    // background-color: red;
+  }
+
+  .tabbbar {
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+  }

src/pages/index/index.jsx

@@ -8,6 +8,7 @@ import guangzhou from "@/images/city/guangzhou.jpg";
 import shanghai from "@/images/city/shanghai.jpg";
 import shenzhen from "@/images/city/shenzhen.jpg";
 import touxiang from "@/images/index/touxiang.jpg";
+import TabbarCom from "@/componments/TabbarCom";
 
 import { useEffect, useState } from "react";
 // import beijing from "../../images/city/beijing.jpg";
@@ -181,7 +182,7 @@ export default function Index() {
         <View className="tabbbarDiv"></View>
       </View>
       {/* 底部tabbar */}
-      <View className="tabbbar">
+      {/* <View className="tabbbar">
         <AtTabBar
           tabList={[
             { title: "首页", iconType: "home" }, //, text: "new"
@@ -197,7 +198,9 @@ export default function Index() {
           }}
           current={0}
         />
-      </View>
+      </View> */}
+
+      <TabbarCom active={0} />
     </View>
   );
 }

src/pages/my/index.jsx

@@ -17,7 +17,7 @@ import guangzhou from "@/images/city/guangzhou.jpg";
 import shanghai from "@/images/city/shanghai.jpg";
 import shenzhen from "@/images/city/shenzhen.jpg";
 import touxiang from "@/images/index/touxiang.jpg";
-
+import TabbarCom from "@/componments/TabbarCom";
 import { useEffect, useState } from "react";
 const my = () => {
   const [open, setopen] = useState(false);
@@ -69,7 +69,7 @@ const my = () => {
       </View>
 
       {/* 底部tabbar */}
-      <View className="tabbbar">
+      {/* <View className="tabbbar">
         <AtTabBar
           tabList={[
             { title: "首页", iconType: "home" }, //, text: "new"
@@ -86,7 +86,8 @@ const my = () => {
           }}
           current={1}
         />
-      </View>
+      </View> */}
+      <TabbarCom active={1} />
     </View>
   );
 };