bandhuBuy-uniapp/src/layouts/fg-tabbar/fg-tabbar.vue

<script setup lang="ts">
import { tabbarStore } from './tabbar'
// 'i-carbon-code',
import { tabbarList as _tabBarList, CUSTOM_TABBAR_ENABLE, CUSTOM_TABBAR_NO_CACHE } from './tabbarList'

const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
function selectTabBar({ value: index }: { value: number }) {
  const url = tabbarList[index].path
  tabbarStore.setCurIdx(index)
  if (CUSTOM_TABBAR_NO_CACHE) {
    uni.navigateTo({ url })
  }
  else {
    uni.switchTab({ url })
  }
}
onLoad(() => {
  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
  CUSTOM_TABBAR_ENABLE
  && uni.hideTabBar({
    fail(err) {
      console.log('hideTabBar fail: ', err)
    },
    success(res) {
      console.log('hideTabBar success: ', res)
    },
  })
})
</script>

<template>
  <wd-tabbar
    v-if="CUSTOM_TABBAR_ENABLE"
    v-model="tabbarStore.curIdx"
    custom-class="bg-white/60! backdrop-blur-20" :bordered="false"

    safe-area-inset-bottom placeholder fixed
    @change="selectTabBar"
  >
    <block v-for="(item, idx) in tabbarList" :key="item.path">
      <wd-tabbar-item :icon="idx === tabbarStore.curIdx ? item.selectedIconPath : item.iconPath" />
    </block>
  </wd-tabbar>
</template>