feat: 支持自定义 tabbar

src/app.config.js

@@ -23,6 +23,7 @@ export default defineAppConfig({
     navigationBarTextStyle: "black",
   },
   tabBar: {
+    custom: true,
     color: '#171826',
     selectedColor: '#2ABED1',
     backgroundColor: '#ffffff',

src/custom-tab-bar/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  "component": true
+}

src/custom-tab-bar/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="tabbar-module">
+    <van-tabbar
+      class="footer-box"
+      :value="activeTabKey"
+    >
+      <van-tabbar-item
+        v-for="(item) in tabbars"
+        :key="item.key"
+        :name="item.key"
+        :badge="item.badge"
+        @click="onSwitchTab(item)"
+      >
+        <template #icon="props">
+          <span class="iconfont" :class="props.active ? item.activeIcon : item.icon"></span>
+        </template>
+        {{item.text}}
+      </van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+import { Tabbar, TabbarItem } from "vant";
+import { mapGetters, mapMutations } from "vuex";
+import Taro from "@tarojs/taro";
+
+export default {
+  components: {
+    [Tabbar.name]: Tabbar,
+    [TabbarItem.name]: TabbarItem
+  },
+  created() {
+    this.checkActiveTabbar()
+  },
+  data () {
+    return {
+      active: 'home',
+      tabbars: [
+        {
+          key: 'home',
+          text: '订阅',
+          path: '/pages/tabbar/home/index',
+          icon: 'icon-nav_un_book',
+          activeIcon: 'icon-nav_un_book',
+          badge: ''
+        },
+        {
+          key: 'search',
+          text: '搜索',
+          path: '/pages/tabbar/search/index',
+          icon: 'icon-sousuo1',
+          activeIcon: 'icon-sousuo1',
+          badge: ''
+        },
+        {
+          key: 'box',
+          text: '全部商机',
+          path: '/pages/tabbar/box/index',
+          icon: 'icon-workSpace',
+          activeIcon: 'icon-workSpace',
+          badge: 'HOT'
+        },
+        {
+          key: 'mine',
+          text: '我的',
+          path: '/pages/tabbar/mine/index',
+          icon: 'icon-nav_un_mine',
+          activeIcon: 'icon-nav_un_mine',
+          badge: ''
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('tabbar', ['activeTabKey'])
+  },
+  methods: {
+    ...mapMutations('tabbar', ['doSwitchTab']),
+    checkActiveTabbar ()  {
+      const activeKey = this.getComputedActiveKey(this.activeTabKey || this.tabbars[0].key)
+      this.doSwitchTab(activeKey)
+    },
+    getComputedActiveKey (defaultActive = '') {
+      let active = defaultActive
+      try {
+        const pagePath = Taro.getCurrentInstance().router?.path
+        const item = this.tabbars.find(item => item.path.indexOf(pagePath) !== -1)
+        active = item?.key || defaultActive
+      } catch (e) {
+        console.log(e)
+      }
+      return active
+    },
+    onSwitchTab (item) {
+      this.doSwitchTab(item.key)
+      Taro.switchTab({
+        url: item.path
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../app.scss';
+.tabbar-module {
+  .van-tabbar-item__icon .iconfont {
+    font-size: 24px;
+  }
+  .van-tabbar-item {
+    color: #171826;
+    &.van-tabbar-item--active {
+      color: $main;
+    }
+  }
+  .van-info {
+    position: absolute;
+    top: 0;
+    right: 0;
+    box-sizing: border-box;
+    min-width: 4.267vw;
+    padding: 0 .8vw;
+    color: #fff;
+    font-weight: 500;
+    font-size: 3.2vw;
+    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+    line-height: 1.2;
+    text-align: center;
+    background-color: #ee0a24;
+    border: 1px solid #fff;
+    border-radius: 4.267vw;
+    transform: translate(50%, -50%);
+    transform-origin: 100%;
+  }
+}
+</style>

src/pages/tabbar/box/index.config.js

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '更多商机',
-  "navigationBarBackgroundColor": "#fbe4b9"
+  "navigationBarBackgroundColor": "#fbe4b9",
+  usingComponents: {},
 })

src/pages/tabbar/mine/index.config.js

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '我的'
+  navigationBarTitleText: '我的',
+  usingComponents: {},
 })

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import search from './modules/search'
 import user from './modules/user'
 import env from './modules/env'
+import tabbar from './modules/tabbar'
 
 Vue.use(Vuex)
 
@@ -12,6 +13,7 @@ export default new Vuex.Store({
   modules: {
     search,
     user,
-    env
+    env,
+    tabbar
   }
 })

src/store/modules/tabbar.js

@@ -0,0 +1,17 @@
+export default {
+  namespaced: true,
+  state: () => ({
+    activeKey: ''
+  }),
+  mutations: {
+    doSwitchTab (state, key) {
+      state.activeKey = key
+    }
+  },
+  actions: {},
+  getters: {
+    activeTabKey (state) {
+      return state.activeKey
+    }
+  }
+}