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 ()

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
packages/vant/src
icon/test/__snapshots__
demo.spec.ts.snap
tab/test/__snapshots__
demo.spec.ts.snap
tabs
Tabs.tsx

2
packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap

@ -4,6 +4,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div>
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
@ -61,6 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"

4
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap

@ -546,6 +546,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div>
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
@ -603,6 +604,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"
@ -1096,6 +1098,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div>
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
@ -1197,6 +1200,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"

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

@ -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}