blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tab): tab(with sticky prop) loss 'fixed' classname after switch tab (#12547)

Browse Source
This commit is contained in:
Nemo Shen 2024-01-06 18:55:44 +08:00 committed by GitHub
parent b5645ee192
commit b6a1c00e95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/vant/src/sticky/Sticky.tsx
View File

@ -119,7 +119,8 @@ export default defineComponent({
if (container) {
const containerRect = useRect(container);
const difference = containerRect.bottom - offset.value - state.height;
state.fixed = offset.value > rootRect.top && containerRect.bottom > 0;
state.fixed =
offset.value >= rootRect.top && containerRect.bottom > 0;
state.transform = difference < 0 ? difference : 0;
} else {
state.fixed = offset.value > rootRect.top;

45
packages/vant/src/tab/test/index.spec.tsx
View File

@ -437,6 +437,51 @@ test('should not render header when showHeader is false', async () => {
expect(tabs.length).toEqual(0);
});
test('should fixed when sticky offset is equal top', async () => {
const wrapper = mount({
render() {
return (
<Tabs sticky>
<Tab title="title1">Text</Tab>
<Tab title="title2">Text</Tab>
</Tabs>
);
},
});
const mockContainerRect = vi
.spyOn(wrapper.element, 'getBoundingClientRect')
.mockReturnValue({
bottom: 10,
} as DOMRect);
const container = wrapper.element.children[0];
const mockStickyRect = vi
.spyOn(container, 'getBoundingClientRect')
.mockReturnValue({
top: -10,
} as DOMRect);
expect(wrapper.find('.van-sticky').classes()).toStrictEqual(['van-sticky']);
await mockScrollTop(100);
expect(wrapper.find('.van-sticky').classes()).toStrictEqual([
'van-sticky',
'van-sticky--fixed',
]);
mockStickyRect.mockReturnValue({
top: 0,
} as DOMRect);
await mockScrollTop(100);
expect(wrapper.find('.van-sticky').classes()).toStrictEqual([
'van-sticky',
'van-sticky--fixed',
]);
mockStickyRect.mockRestore();
mockContainerRect.mockRestore();
});
test('should call before-change prop before changing', async () => {
const onChange = vi.fn();
const beforeChange = (name: number) => {