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): 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 GitHub
parent 3d7ca9b490
commit d60096aff2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist"
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>
<div class="van-tabs__wrap">
<div role="tablist"
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>
</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>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist"
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>
<div class="van-tabs__wrap">
<div role="tablist"
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>
</div>
</div>
</div>
@ -1096,102 +1098,104 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist"
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>
<div class="van-tabs__wrap">
<div role="tablist"
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>
</div>
</div>
</div>

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

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