107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
import { customTabbarEnable, nativeTabbarList, nativeTabbarNeedHide, tabbarCacheEnable } from './config'
|
||
import { tabbarStore } from './store'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// 根据当前路由确定激活的 tabbar
|
||
const activeTabbar = ref(nativeTabbarList[tabbarStore.curIdx]?.pagePath || nativeTabbarList[0]?.pagePath || '')
|
||
|
||
// 初始化激活的 tabbar
|
||
function initActiveTabbar() {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 0) {
|
||
const currentPage = pages[pages.length - 1]
|
||
const path = `/${currentPage.route}`
|
||
|
||
// 根据当前路径找到对应的 tabbar
|
||
const item = nativeTabbarList.find(tab => `/${tab.pagePath}` === path)
|
||
if (item) {
|
||
const index = nativeTabbarList.findIndex(tab => tab.pagePath === item.pagePath)
|
||
tabbarStore.setCurIdx(index)
|
||
activeTabbar.value = item.pagePath
|
||
}
|
||
}
|
||
}
|
||
|
||
// 初始化
|
||
onLoad(() => {
|
||
initActiveTabbar()
|
||
|
||
// 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
|
||
if (customTabbarEnable && nativeTabbarNeedHide) {
|
||
uni.hideTabBar({
|
||
fail(err) {
|
||
console.log('hideTabBar fail: ', err)
|
||
},
|
||
success(res) {
|
||
// console.log('hideTabBar success: ', res)
|
||
},
|
||
})
|
||
}
|
||
})
|
||
|
||
// 监听页面变化
|
||
onShow(() => {
|
||
initActiveTabbar()
|
||
})
|
||
|
||
// tabbar 切换处理
|
||
function handleTabbarChange({ value }: { value: string }) {
|
||
const item = nativeTabbarList.find(tab => tab.pagePath === value)
|
||
if (!item)
|
||
return
|
||
|
||
const index = nativeTabbarList.findIndex(tab => tab.pagePath === value)
|
||
tabbarStore.setCurIdx(index)
|
||
activeTabbar.value = value
|
||
|
||
const url = `/${item.pagePath}`
|
||
if (tabbarCacheEnable) {
|
||
uni.switchTab({ url })
|
||
}
|
||
else {
|
||
uni.navigateTo({ url })
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<wd-tabbar
|
||
v-if="customTabbarEnable"
|
||
v-model="activeTabbar"
|
||
active-color="#018d71"
|
||
inactive-color="#999999"
|
||
|
||
safe-area-inset-bottom fixed
|
||
@change="handleTabbarChange"
|
||
>
|
||
<wd-tabbar-item
|
||
v-for="(item, index) in nativeTabbarList"
|
||
:key="index"
|
||
:title="item.text"
|
||
:name="item.pagePath"
|
||
>
|
||
<template #icon>
|
||
<!-- 如果配置了图标名称，使用 wot-design-uni 图标，否则使用图片 -->
|
||
<wd-icon
|
||
v-if="item.icon && item.selectedIcon"
|
||
:name="activeTabbar === item.pagePath ? item.selectedIcon : item.icon"
|
||
:color="activeTabbar === item.pagePath ? '#018d71' : '#999999'"
|
||
size="40rpx"
|
||
/>
|
||
<wd-img
|
||
v-else
|
||
height="40rpx"
|
||
width="40rpx"
|
||
:src="activeTabbar === item.pagePath ? `/${item.selectedIconPath}` : `/${item.iconPath}`"
|
||
/>
|
||
</template>
|
||
</wd-tabbar-item>
|
||
</wd-tabbar>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
// wot-design-uni tabbar 组件自带样式，无需额外样式
|
||
</style>
|