From ee43df4fa6c1ed3df0c56befb1575c5d52a25713 Mon Sep 17 00:00:00 2001
From: summer <tgj98@qq.com>
Date: Tue, 2 Apr 2024 17:31:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89tabbar=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.config.ts           |  1 +
 src/App.vue               |  3 ++
 src/components/tabbar.vue | 82 +++++++++++++++++++++++++++++++++++++++
 src/pages.json            |  1 +
 src/pages/index/about.vue |  1 +
 src/pages/index/index.vue |  1 +
 src/store/tabbar.ts       | 42 ++++++++++++++++++++
 7 files changed, 131 insertions(+)
 create mode 100644 src/components/tabbar.vue
 create mode 100644 src/store/tabbar.ts

diff --git a/pages.config.ts b/pages.config.ts
index 96d65b7..be90d0f 100644
--- a/pages.config.ts
+++ b/pages.config.ts
@@ -15,6 +15,7 @@ export default defineUniPages({
     },
   },
   tabBar: {
+    custom: true,
     color: '#999999',
     selectedColor: '#018d71',
     backgroundColor: '#F8F8F8',
diff --git a/src/App.vue b/src/App.vue
index d0dface..e978b98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,9 @@ import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 
 onLaunch(() => {
   console.log('App Launch')
+  // #ifdef H5
+  uni.hideTabBar()
+  // #endif
 })
 onShow(() => {
   console.log('App Show')
diff --git a/src/components/tabbar.vue b/src/components/tabbar.vue
new file mode 100644
index 0000000..554286c
--- /dev/null
+++ b/src/components/tabbar.vue
@@ -0,0 +1,82 @@
+<template>
+  <view class="tab-bar">
+    <view class="content">
+      <view
+        class="one-tab"
+        v-for="(item, index) in tabBarList"
+        :key="index"
+        @click="selectTabBar(index)"
+      >
+        <view>
+          <view class="tab-img">
+            <image v-if="tabIndex === index" class="img" :src="item.selectedIconPath"></image>
+            <image v-else class="img" :src="item.iconPath"></image>
+          </view>
+        </view>
+        <view v-if="tabIndex === index" class="tit select-texts">{{ item.text }}</view>
+        <view v-else class="tit texts">{{ item.text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useTabbarStore } from '@/store/tabbar'
+import { storeToRefs } from 'pinia'
+
+const tabbar = useTabbarStore()
+const { tabBarList, tabIndex } = storeToRefs(tabbar)
+const { setTabIndex } = tabbar
+
+function selectTabBar(index: number) {
+  setTabIndex(index)
+  uni.switchTab({ url: tabBarList.value[index].pagePath })
+}
+</script>
+
+<style lang="scss">
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  padding-top: 10rpx;
+  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+  background-color: #f8f8f8;
+
+  .content {
+    display: flex;
+
+    .one-tab {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 50%;
+
+      .tab-img {
+        width: 50rpx;
+        height: 50rpx;
+
+        .img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .tit {
+        font-size: 30rpx;
+        transform: scale(0.7);
+      }
+
+      .select-texts {
+        color: #018d71;
+      }
+
+      .texts {
+        color: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 0f631f8..edfde11 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -13,6 +13,7 @@
     }
   },
   "tabBar": {
+    "custom": true,
     "color": "#999999",
     "selectedColor": "#018d71",
     "backgroundColor": "#F8F8F8",
diff --git a/src/pages/index/about.vue b/src/pages/index/about.vue
index 7f11371..ffe2d4d 100644
--- a/src/pages/index/about.vue
+++ b/src/pages/index/about.vue
@@ -27,6 +27,7 @@
     <view class="desc">测试设计稿样式</view>
     <view class="desc">设计稿是750px，css里面全部写rpx 即可</view>
   </view>
+  <tabbar />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 9675563..226f96a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -42,6 +42,7 @@
       <!-- #endif -->
     </view>
   </view>
+  <tabbar />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/store/tabbar.ts b/src/store/tabbar.ts
new file mode 100644
index 0000000..ad1d840
--- /dev/null
+++ b/src/store/tabbar.ts
@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useTabbarStore = defineStore(
+  'tabbar',
+  () => {
+    interface tabBarItem {
+      iconPath: string
+      selectedIconPath: string
+      pagePath: string
+      text: string
+    }
+    const tabBarList = ref<tabBarItem[]>([
+      {
+        iconPath: '/static/tabbar/home.png',
+        selectedIconPath: '/static/tabbar/homeHL.png',
+        pagePath: '/pages/index/index',
+        text: '首页',
+      },
+      {
+        iconPath: '/static/tabbar/example.png',
+        selectedIconPath: '/static/tabbar/exampleHL.png',
+        pagePath: '/pages/index/about',
+        text: '关于',
+      },
+    ])
+    const tabIndex = ref(0)
+
+    const setTabIndex = (val: number) => {
+      tabIndex.value = val
+    }
+
+    return {
+      tabBarList,
+      tabIndex,
+      setTabIndex,
+    }
+  },
+  {
+    persist: true,
+  },
+)