From af1ef3ab8ecf596acd252fd727c08f38f4ef6055 Mon Sep 17 00:00:00 2001
From: H1d3rOne <H1d3rOne@users.noreply.github.com>
Date: Sat, 7 Mar 2026 21:06:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89tabBar=E7=BB=84=E4=BB=B6=EF=BC=8Cemoji=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建custom-tabbar组件
- 使用emoji图标：首页🏠、记录📋、工具🔧、我的👤
- 在各tabBar页面添加自定义tabBar组件
- pages.json启用custom: true
---
 .../custom-tabbar/custom-tabbar.vue           | 120 ++++++++++++++++++
 xuan-deduct-uniapp/src/pages.json             |  23 ++--
 xuan-deduct-uniapp/src/pages/index/index.vue  |   2 +
 xuan-deduct-uniapp/src/pages/mine/mine.vue    |   2 +
 .../src/pages/records/records.vue             |   2 +
 xuan-deduct-uniapp/src/pages/tools/tools.vue  |   2 +
 6 files changed, 139 insertions(+), 12 deletions(-)
 create mode 100644 xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue

diff --git a/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
new file mode 100644
index 0000000..963b040
--- /dev/null
+++ b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
@@ -0,0 +1,120 @@
+<template>
+  <view class="custom-tabbar">
+    <view 
+      v-for="(item, index) in tabList" 
+      :key="index" 
+      class="tabbar-item" 
+      :class="{ active: currentIndex === index }"
+      @click="switchTab(index)"
+    >
+      <view class="tabbar-icon">
+        <text class="icon-emoji">{{ item.icon }}</text>
+      </view>
+      <text class="tabbar-text">{{ item.text }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomTabbar',
+  props: {
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      tabList: [
+        { 
+          text: '首页', 
+          icon: '🏠',
+          pagePath: '/pages/index/index'
+        },
+        { 
+          text: '记录', 
+          icon: '📋',
+          pagePath: '/pages/records/records'
+        },
+        { 
+          text: '工具', 
+          icon: '🔧',
+          pagePath: '/pages/tools/tools'
+        },
+        { 
+          text: '我的', 
+          icon: '👤',
+          pagePath: '/pages/mine/mine'
+        }
+      ]
+    }
+  },
+  watch: {
+    current: {
+      immediate: true,
+      handler(val) {
+        this.currentIndex = val
+      }
+    }
+  },
+  methods: {
+    switchTab(index) {
+      if (this.currentIndex === index) return
+      this.currentIndex = index
+      const path = this.tabList[index].pagePath
+      uni.switchTab({
+        url: path
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border-top: 1rpx solid #f0f0f0;
+  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
+  z-index: 9999;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tabbar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8rpx 0;
+}
+
+.tabbar-icon {
+  margin-bottom: 4rpx;
+}
+
+.icon-emoji {
+  font-size: 44rpx;
+  line-height: 1;
+}
+
+.tabbar-text {
+  font-size: 20rpx;
+  color: #999999;
+  transition: color 0.3s;
+}
+
+.tabbar-item.active .tabbar-text {
+  color: #DB2777;
+  font-weight: 500;
+}
+</style>
diff --git a/xuan-deduct-uniapp/src/pages.json b/xuan-deduct-uniapp/src/pages.json
index e811ff9..760935c 100644
--- a/xuan-deduct-uniapp/src/pages.json
+++ b/xuan-deduct-uniapp/src/pages.json
@@ -168,6 +168,7 @@
     "navigationBarTitleText": "玄机排盘"
   },
   "tabBar": {
+    "custom": true,
     "color": "#999999",
     "selectedColor": "#DB2777",
     "backgroundColor": "#ffffff",
@@ -175,28 +176,26 @@
     "list": [
       {
         "pagePath": "pages/index/index",
-        "text": "首页",
-        "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/home-active.png"
+        "text": "首页"
       },
       {
         "pagePath": "pages/records/records",
-        "text": "记录",
-        "iconPath": "static/tabbar/record.png",
-        "selectedIconPath": "static/tabbar/record-active.png"
+        "text": "记录"
       },
       {
         "pagePath": "pages/tools/tools",
-        "text": "工具",
-        "iconPath": "static/tabbar/tool.png",
-        "selectedIconPath": "static/tabbar/tool-active.png"
+        "text": "工具"
       },
       {
         "pagePath": "pages/mine/mine",
-        "text": "我的",
-        "iconPath": "static/tabbar/mine.png",
-        "selectedIconPath": "static/tabbar/mine-active.png"
+        "text": "我的"
       }
     ]
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
   }
 }
diff --git a/xuan-deduct-uniapp/src/pages/index/index.vue b/xuan-deduct-uniapp/src/pages/index/index.vue
index 708e28c..53bb0c7 100644
--- a/xuan-deduct-uniapp/src/pages/index/index.vue
+++ b/xuan-deduct-uniapp/src/pages/index/index.vue
@@ -153,6 +153,8 @@
     <view class="footer">
       <view class="footer-divider"></view>
     </view>
+    
+    <custom-tabbar :current="0"></custom-tabbar>
   </view>
 </template>
 
diff --git a/xuan-deduct-uniapp/src/pages/mine/mine.vue b/xuan-deduct-uniapp/src/pages/mine/mine.vue
index 77de396..7a18aa6 100644
--- a/xuan-deduct-uniapp/src/pages/mine/mine.vue
+++ b/xuan-deduct-uniapp/src/pages/mine/mine.vue
@@ -23,6 +23,8 @@
     <view class="version">
       <text class="version-text">版本 1.0.0</text>
     </view>
+    
+    <custom-tabbar :current="3"></custom-tabbar>
   </view>
 </template>
 
diff --git a/xuan-deduct-uniapp/src/pages/records/records.vue b/xuan-deduct-uniapp/src/pages/records/records.vue
index fbfea2a..087dc49 100644
--- a/xuan-deduct-uniapp/src/pages/records/records.vue
+++ b/xuan-deduct-uniapp/src/pages/records/records.vue
@@ -28,6 +28,8 @@
         </view>
       </view>
     </view>
+    
+    <custom-tabbar :current="1"></custom-tabbar>
   </view>
 </template>
 
diff --git a/xuan-deduct-uniapp/src/pages/tools/tools.vue b/xuan-deduct-uniapp/src/pages/tools/tools.vue
index b8a2e50..b3c9393 100644
--- a/xuan-deduct-uniapp/src/pages/tools/tools.vue
+++ b/xuan-deduct-uniapp/src/pages/tools/tools.vue
@@ -22,6 +22,8 @@
         </view>
       </view>
     </view>
+    
+    <custom-tabbar :current="2"></custom-tabbar>
   </view>
 </template>