blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tabs): incorrect scroll position in some cases (#11085)

Browse Source
This commit is contained in:
neverland 2022-09-24 22:59:47 +08:00 committed by GitHub
parent 3d41ac66a1
commit 8444c6f2f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -111,7 +111,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive" <div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"

19
packages/vant/src/tab/Tab.tsx
View File

@ -21,7 +21,7 @@ import {
import { TABS_KEY } from '../tabs/Tabs'; import { TABS_KEY } from '../tabs/Tabs';
// Composables // Composables
import { useParent } from '@vant/use'; import { doubleRaf, useParent } from '@vant/use';
import { useId } from '../composables/use-id'; import { useId } from '../composables/use-id';
import { useExpose } from '../composables/use-expose'; import { useExpose } from '../composables/use-expose';
import { routeProps } from '../composables/use-route'; import { routeProps } from '../composables/use-route';
@ -84,6 +84,21 @@ export default defineComponent({
return isActive; return isActive;
}); });
const hasInactiveClass = ref(!active.value);
watch(active, (val) => {
if (val) {
hasInactiveClass.value = false;
} else {
// mark tab as inactive until the active tab is rendered
// to avoid incorrect scroll position or other render issue
// https://github.com/youzan/vant/issues/11050
doubleRaf(() => {
hasInactiveClass.value = true;
});
}
});
watch( watch(
() => props.title, () => props.title,
() => { () => {
@ -109,7 +124,7 @@ export default defineComponent({
<SwipeItem <SwipeItem
id={id} id={id}
role="tabpanel" role="tabpanel"
class={bem('panel-wrapper', { inactive: !active.value })} class={bem('panel-wrapper', { inactive: hasInactiveClass.value })}
tabindex={active.value ? 0 : -1} tabindex={active.value ? 0 : -1}
aria-hidden={!active.value} aria-hidden={!active.value}
aria-labelledby={label} aria-labelledby={label}

4
packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
View File

@ -470,7 +470,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
<div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;" <div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive" <div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -560,7 +560,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
<div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;" <div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive" <div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"