blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-27 11:56:35 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tabs): scroll position when using nav-bottom slot (#11115)

Browse Source
This commit is contained in:
neverland 2022-10-06 16:07:12 +08:00 committed by chenjiahan
parent 46c1ce3ae3
commit 8f12b6c715
3 changed files with 216 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
View File

@ -4,58 +4,60 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div> <div>
<div class="van-sticky"> <div class="van-sticky">
<div class="van-tabs__wrap"> <div>
<div role="tablist" <div class="van-tabs__wrap">
class="van-tabs__nav van-tabs__nav--line" <div role="tablist"
aria-orientation="horizontal" class="van-tabs__nav van-tabs__nav--line"
> aria-orientation="horizontal"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Demo
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Outline
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Filled
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
> >
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Demo
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Outline
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Filled
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div> </div>
</div> </div>
</div> </div>

296
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
View File

@ -546,58 +546,60 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div> <div>
<div class="van-sticky"> <div class="van-sticky">
<div class="van-tabs__wrap"> <div>
<div role="tablist" <div class="van-tabs__wrap">
class="van-tabs__nav van-tabs__nav--line" <div role="tablist"
aria-orientation="horizontal" class="van-tabs__nav van-tabs__nav--line"
> aria-orientation="horizontal"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
> >
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1096,102 +1098,104 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div> <div>
<div class="van-sticky"> <div class="van-sticky">
<div class="van-tabs__wrap"> <div>
<div role="tablist" <div class="van-tabs__wrap">
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete" <div role="tablist"
aria-orientation="horizontal" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
> aria-orientation="horizontal"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--grow van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 4
</span>
</div>
<div id="van-tabs-4"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 5
</span>
</div>
<div id="van-tabs-5"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 6
</span>
</div>
<div id="van-tabs-6"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 7
</span>
</div>
<div id="van-tabs-7"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 8
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
> >
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--grow van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 4
</span>
</div>
<div id="van-tabs-4"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 5
</span>
</div>
<div id="van-tabs-5"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 6
</span>
</div>
<div id="van-tabs-6"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 7
</span>
</div>
<div id="van-tabs-7"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 8
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div> </div>
</div> </div>
</div> </div>

20
packages/vant/src/tabs/Tabs.tsx
View File

@ -415,10 +415,11 @@ export default defineComponent({
}; };
const renderHeader = () => { const renderHeader = () => {
const { type, border } = props; const { type, border, sticky } = props;
return (
const Header = [
<div <div
ref={wrapRef} ref={sticky ? undefined : wrapRef}
class={[ class={[
bem('wrap'), bem('wrap'),
{ [BORDER_TOP_BOTTOM]: type === 'line' && border }, { [BORDER_TOP_BOTTOM]: type === 'line' && border },
@ -439,8 +440,14 @@ export default defineComponent({
{renderLine()} {renderLine()}
{slots['nav-right']?.()} {slots['nav-right']?.()}
</div> </div>
</div> </div>,
); slots['nav-bottom']?.(),
];
if (sticky) {
return <div ref={wrapRef}>{Header}</div>;
}
return Header;
}; };
watch([() => props.color, windowWidth], setLine); watch([() => props.color, windowWidth], setLine);
@ -517,10 +524,9 @@ export default defineComponent({
onScroll={onStickyScroll} onScroll={onStickyScroll}
> >
{renderHeader()} {renderHeader()}
{slots['nav-bottom']?.()}
</Sticky> </Sticky>
) : ( ) : (
[renderHeader(), slots['nav-bottom']?.()] renderHeader()
)} )}
<TabsContent <TabsContent
ref={contentRef} ref={contentRef}