feat: tabbar 组件

pages.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-25 15:45:01
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-25 15:45:27
+ * @LastEditTime: 2024-07-08 10:10:36
  * @Description:
  */
 import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
@@ -15,6 +15,8 @@ export default defineUniPages({
       '^up-(.*)': 'uview-plus/components/u-$1/u-$1.vue',
       '^u-([^-].*)': 'uview-plus/components/u-$1/u-$1.vue',
       '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
+      '^M(.*)': '@/components/M$1/index.vue',
+      '^m-(.*)': '@/components/M$1/index.vue',
     },
   },
   tabBar: {

src/App.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-05-27 11:50:13
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-05 17:25:51
+ * @LastEditTime: 2024-07-08 18:00:30
  * @Description: 
 -->
 <script setup lang="ts">
@@ -10,9 +10,11 @@
 
   onLaunch(() => {
     console.log('App Launch')
+    uni.hideTabBar()
   })
   onShow(() => {
     console.log('App Show')
+    uni.hideTabBar()
   })
   onHide(() => {
     console.log('App Hide')
@@ -24,6 +26,6 @@
   @import 'uview-plus/index';
 
   page {
-    @apply h-full;
+    @apply flex flex-col  h-full;
   }
 </style>

src/components/MPage/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-18 11:40:55
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-18 11:53:36
+ * @LastEditTime: 2024-07-08 18:00:43
  * @Description: 
 -->
 <template>
@@ -26,7 +26,7 @@
 
 <style scoped lang="scss">
   .m-page {
-    @apply h-full bg-white p-12px;
+    @apply flex-1 h-100% bg-white p-12px;
     background: linear-gradient(180deg, #c5e6ff 0%, #ffffff 100%);
     backdrop-filter: blur(57px);
   }

src/components/MTabBar/index.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-07-08 16:31:21
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-07-08 17:56:11
+ * @Description: 
+-->
+<template>
+  <up-tabbar
+    :value="selected"
+    class="m-tabbar"
+    :fixed="true"
+    :placeholder="true"
+    :safe-area-inset-bottom="true"
+    @change="handleChange"
+  >
+    <up-tabbar-item v-for="(item, index) in tabbarList" :key="index" :text="item.text">
+      <template #active-icon>
+        <image class="tabbar-icon" :src="`/${item.selectedIconPath}`"></image>
+      </template>
+      <template #inactive-icon>
+        <image class="tabbar-icon" :src="`/${item.iconPath}`"></image>
+      </template>
+    </up-tabbar-item>
+  </up-tabbar>
+</template>
+
+<script setup lang="ts">
+  import { tabBar } from '@/pages.json'
+  import { useAppStore } from '@/stores/modules/appStore'
+
+  defineOptions({ name: 'MTabBar' })
+
+  const appStore = useAppStore()
+  const selected = ref(appStore.selectedTabbar)
+  const tabbarList = ref(tabBar.list)
+
+  watchEffect(() => {
+    selected.value = appStore.selectedTabbar
+  })
+
+  const handleChange = (val: number) => {
+    appStore.setTabbar(val)
+    uni.switchTab({
+      url: `/${tabbarList.value[val].pagePath}`,
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  .m-tabbar {
+    @apply h-50px;
+  }
+  .tabbar-icon {
+    @apply wh-32px;
+  }
+</style>

src/models/appTypes.ts

@@ -1 +1,3 @@
-export interface AppState {}
+export interface AppState {
+  selectedTabbar: number
+}

src/pages/index/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2019-08-22 19:41:20
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-03 11:27:15
+ * @LastEditTime: 2024-07-08 17:16:02
  * @Description: 
 -->
 <template>
@@ -19,6 +19,7 @@
     <u-button type="primary" text="确定"></u-button>
     <u-button @click="onTest">前往 Auth 页面</u-button>
   </view>
+  <MTabBar></MTabBar>
 </template>
 
 <script setup lang="ts">

src/pages/mine/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-17 16:02:59
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-03 11:27:27
+ * @LastEditTime: 2024-07-08 16:56:12
  * @Description: 
 -->
 <template>
@@ -19,6 +19,7 @@
       </view>
     </template>
   </up-modal>
+  <MTabBar></MTabBar>
 </template>
 
 <script setup lang="ts">

src/stores/modules/appStore.ts

@@ -11,7 +11,13 @@ import type { AppState } from '@/models/appTypes'
 
 export const useAppStore = defineStore('app', {
   state: (): AppState => {
-    return {}
+    return {
+      selectedTabbar: 0,
+    }
+  },
+  actions: {
+    setTabbar(val: number) {
+      this.selectedTabbar = val
+    },
   },
-  actions: {},
 })

types/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     MIcon: typeof import('./../src/components/MIcon/index.vue')['default']
     MNavBar: typeof import('./../src/components/MNavBar/index.vue')['default']
     MPage: typeof import('./../src/components/MPage/index.vue')['default']
+    MTabBar: typeof import('./../src/components/MTabBar/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }