fix: 修复激活标签页定位可能不居中的问题

This commit is contained in:
Hooray
2025-05-27 18:19:59 +08:00
parent 05261b37bb
commit 8bfa0f0c27
2 changed files with 13 additions and 3 deletions
+12 -2
View File
@@ -30,10 +30,20 @@ const tabRef = useTemplateRef<HTMLElement[]>('tabRef')
watch(() => route, (val) => {
if (settingsStore.settings.tabbar.enable) {
tabbarStore.add(val).then(() => {
tabbarStore.add(val)
nextTick(() => {
const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
if (index !== -1) {
tabRef.value && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4)
const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index)
const containerEl = tabsRef.value?.ref?.$el
if (tabEl && containerEl) {
const tabLeft = tabEl.offsetLeft
const tabWidth = tabEl.offsetWidth
const containerWidth = containerEl.clientWidth
// 计算滚动位置,使标签页居中
const scrollLeft = tabLeft - (containerWidth - tabWidth) / 2
tabsRef.value?.scrollTo(scrollLeft)
}
tabbarScrollTip()
}
})
+1 -1
View File
@@ -12,7 +12,7 @@ const useTabbarStore = defineStore(
const leaveIndex = ref(-1)
// 添加标签页
async function add(route: RouteLocationNormalized) {
function add(route: RouteLocationNormalized) {
const names: string[] = []
route.matched.forEach((v, i) => {
if (i > 0) {