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

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

@ -4,6 +4,7 @@ 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>
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">
<div role="tablist" <div role="tablist"
class="van-tabs__nav van-tabs__nav--line" 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> </div>
</div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"

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

@ -546,6 +546,7 @@ 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>
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">
<div role="tablist" <div role="tablist"
class="van-tabs__nav van-tabs__nav--line" 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> </div>
</div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"
@ -1096,6 +1098,7 @@ 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>
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">
<div role="tablist" <div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete" 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> </div>
</div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"

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

@ -384,10 +384,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 },
@ -408,8 +409,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);
@ -486,10 +493,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}