minnan/src/common/components/tabs/Tabbar.vue

<template>
  <TabBar
    :selectedTabIndex="current"
    @update:selectedTabIndex="changeTab"
    fixed
    xbarSpace
    :innerStyle="{ 
      zIndex: 999 ,
      boxShadow: '0 -2rpx 4rpx rgba(0, 0, 0, 0.1)',
      backdropFilter: 'blur(10px)',
      backgroundColor: 'rgba(246, 242, 231, 0.7)',
    }"
  >
    <TabBarItem icon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_home_off.png" activeIcon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_home_on.png" text="首页" />
    <TabBarItem icon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_discover_off.png" activeIcon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_discover_on.png" text="资讯" />
    <TabBarItem icon="https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_inhert_off.png" activeIcon="https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_inhert_on.png" hump :humpHeight="[0,0]" :humpSpace="[20,20]" :iconSize="140" text="传承" />
    <TabBarItem icon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_shop_off.png" activeIcon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_shop_on.png" text="乐游" />
    <TabBarItem icon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_profile_off.png" activeIcon="https://mncdn.wenlvti.net/app_static/minnan/images/tabs/icon_profile_on.png" text="我的" />
  </TabBar>
</template>

<script setup lang="ts">
import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
});
function changeTab(newVal: number) {
  switch(newVal) {
    case 0:
      switchTab('/pages/home/index', 0);
      break;
    case 1:
      switchTab('/pages/article/index', 1);
      break;
    case 2:
      switchTab('/pages/inhert/index', 2);
      break;
    case 3:
      switchTab('/pages/travel/index', 3);
      break;
    case 4:
      switchTab('/pages/user/index', 4);
      break;
  }
}

function switchTab(path: string, index: number) {
  if (props.current === index) 
    return;
  uni.switchTab({
    url: path
  });
}
</script>