blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-27 03:46: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

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>
<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
View File

@ -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
View File

@ -415,10 +415,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 },
@ -439,8 +440,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);
@ -517,10 +524,9 @@ export default defineComponent({
onScroll={onStickyScroll}
>
{renderHeader()}
{slots['nav-bottom']?.()}
</Sticky>
) : (
[renderHeader(), slots['nav-bottom']?.()]
renderHeader()
)}
<TabsContent
ref={contentRef}