diff --git a/packages/vant/src/index-bar/IndexBar.tsx b/packages/vant/src/index-bar/IndexBar.tsx index 6441281d3..ab136180f 100644 --- a/packages/vant/src/index-bar/IndexBar.tsx +++ b/packages/vant/src/index-bar/IndexBar.tsx @@ -140,7 +140,11 @@ export default defineComponent({ const match = getMatchAnchor(selectActiveIndex); if (match) { const rect = match.getRect(scrollParent.value, scrollParentRect); - active = getActiveAnchor(rect.top, rects); + if (props.sticky && props.stickyOffsetTop) { + active = getActiveAnchor(rect.top - props.stickyOffsetTop, rects); + } else { + active = getActiveAnchor(rect.top, rects); + } } } else { active = getActiveAnchor(scrollTop, rects); @@ -229,7 +233,11 @@ export default defineComponent({ } if (props.sticky && props.stickyOffsetTop) { - setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop); + if (getRootScrollTop() === offsetHeight - scrollParentRect.height) { + setRootScrollTop(getRootScrollTop()); + } else { + setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop); + } } emit('select', match.index); diff --git a/packages/vant/src/index-bar/test/__snapshots__/index.spec.jsx.snap b/packages/vant/src/index-bar/test/__snapshots__/index.spec.jsx.snap index 7635b1f60..c90509c59 100644 --- a/packages/vant/src/index-bar/test/__snapshots__/index.spec.jsx.snap +++ b/packages/vant/src/index-bar/test/__snapshots__/index.spec.jsx.snap @@ -6,6 +6,389 @@ exports[`should allow to custom anchor content 1`] = ` `; +exports[`should render active anchor when stick prop is true and has stickyOffsetTop 1`] = ` +
+
+ + A + + + B + + + C + + + D + + + E + + + F + + + G + + + H + + + I + + + J + + + K + + + L + + + M + + + N + + + O + + + P + + + Q + + + R + + + S + + + T + + + U + + + V + + + W + + + X + + + Y + + + Z + +
+
+
+ A +
+
+
+ A1 +
+
+
+ B +
+
+
+ B1 +
+
+
+ C +
+
+
+ C1 +
+
+`; + +exports[`should render active anchor when stick prop is true and has stickyOffsetTop 2`] = ` +
+
+ + A + + + B + + + C + + + D + + + E + + + F + + + G + + + H + + + I + + + J + + + K + + + L + + + M + + + N + + + O + + + P + + + Q + + + R + + + S + + + T + + + U + + + V + + + W + + + X + + + Y + + + Z + +
+
+
+ A +
+
+
+ A1 +
+
+
+ B +
+
+
+ B1 +
+
+
+ C +
+
+
+ C1 +
+
+`; + exports[`should update active anchor after page scroll 1`] = `
diff --git a/packages/vant/src/index-bar/test/index.spec.jsx b/packages/vant/src/index-bar/test/index.spec.jsx index 8554e7df0..b48f17b6e 100644 --- a/packages/vant/src/index-bar/test/index.spec.jsx +++ b/packages/vant/src/index-bar/test/index.spec.jsx @@ -3,6 +3,7 @@ import { mount, trigger, triggerDrag, + mockScrollTo, mockScrollTop, mockScrollIntoView, } from '../../../test'; @@ -206,3 +207,48 @@ test('should render teleport prop correctly', () => { expect(root.querySelector('.van-index-bar__sidebar')).toBeTruthy(); }); + +test('should render active anchor when stick prop is true and has stickyOffsetTop', async () => { + const nativeRect = Element.prototype.getBoundingClientRect; + Element.prototype.getBoundingClientRect = function () { + const { index } = this.dataset; + return { + top: index ? index * (10 + 32) : 0, + height: 10, + }; + }; + + mockScrollTo(); + const onSelect = vi.fn(); + const onChange = vi.fn(); + + const wrapper = mount({ + render() { + return ( + + +
A1
+ +
B1
+ +
C1
+ + ); + }, + }); + + await nextTick(); + expect(wrapper.html()).toMatchSnapshot(); + + const indexes = wrapper.findAll('.van-index-bar__index'); + await indexes[0].trigger('click'); + await trigger(window, 'scroll'); + + expect(wrapper.html()).toMatchSnapshot(); + expect(onSelect).toHaveBeenCalledWith('A'); + expect(onChange).toHaveBeenCalledWith('A'); + + wrapper.unmount(); + + Element.prototype.getBoundingClientRect = nativeRect; +}); diff --git a/packages/vant/test/dom.ts b/packages/vant/test/dom.ts index feb3e65d0..4337be427 100644 --- a/packages/vant/test/dom.ts +++ b/packages/vant/test/dom.ts @@ -37,6 +37,14 @@ function mockHTMLElementOffset() { }); } +export function mockScrollTo() { + const fn = vi.fn(); + if (inBrowser) { + window.scrollTo = fn; + } + return fn; +} + export function mockScrollIntoView() { const fn = vi.fn(); if (inBrowser) {