diff --git a/packages/vant/src/swipe/README.md b/packages/vant/src/swipe/README.md index 423631fe1..ba49513aa 100644 --- a/packages/vant/src/swipe/README.md +++ b/packages/vant/src/swipe/README.md @@ -158,9 +158,11 @@ export default { ### Swipe Events -| Event | Description | Arguments | -| ------ | ---------------------------------- | ----------------------------- | -| change | Emitted when current swipe changed | index: index of current swipe | +| Event | Description | Arguments | +| --- | --- | --- | +| change | Emitted when current swipe changed | _index: number_ | +| drag-start `v4.0.9` | Emitted when user starts dragging the swipe | - | +| drag-end `v4.0.9` | Emitted when user ends dragging the swipe | - | ### SwipeItem Events diff --git a/packages/vant/src/swipe/README.zh-CN.md b/packages/vant/src/swipe/README.zh-CN.md index fb0bb9be1..d2693050b 100644 --- a/packages/vant/src/swipe/README.zh-CN.md +++ b/packages/vant/src/swipe/README.zh-CN.md @@ -166,9 +166,11 @@ export default { ### Swipe Events -| 事件名 | 说明 | 回调参数 | -| ------ | -------------------- | ------------------- | -| change | 每一页轮播结束后触发 | index, 当前页的索引 | +| 事件名 | 说明 | 回调参数 | +| ------------------- | ---------------------------- | --------------- | +| change | 每一页轮播结束后触发 | _index: number_ | +| drag-start `v4.0.9` | 当用户开始拖动轮播组件时触发 | - | +| drag-end `v4.0.9` | 当用户结束拖动轮播组件时触发 | - | ### SwipeItem Events diff --git a/packages/vant/src/swipe/Swipe.tsx b/packages/vant/src/swipe/Swipe.tsx index cab9ee53a..4fdf8bbe8 100644 --- a/packages/vant/src/swipe/Swipe.tsx +++ b/packages/vant/src/swipe/Swipe.tsx @@ -67,7 +67,7 @@ export default defineComponent({ props: swipeProps, - emits: ['change'], + emits: ['change', 'dragStart', 'dragEnd'], setup(props, { emit, slots }) { const root = ref(); @@ -81,6 +81,9 @@ export default defineComponent({ swiping: false, }); + // Whether the user is dragging the swipe + let dragging = false; + const touch = useTouch(); const { children, linkChildren } = useChildren(SWIPE_KEY); @@ -302,6 +305,8 @@ export default defineComponent({ if (!props.touchable) return; touch.start(event); + + dragging = false; touchStartTime = Date.now(); stopAutoplay(); @@ -321,6 +326,11 @@ export default defineComponent({ if (!isEdgeTouch) { preventDefault(event, props.stopPropagation); move({ offset: delta.value }); + + if (!dragging) { + emit('dragStart'); + dragging = true; + } } } } @@ -359,7 +369,10 @@ export default defineComponent({ move({ pace: 0 }); } + dragging = false; state.swiping = false; + + emit('dragEnd'); autoplay(); }; diff --git a/packages/vant/src/swipe/test/index.spec.jsx b/packages/vant/src/swipe/test/index.spec.jsx index 44e78ddd9..7a3901690 100644 --- a/packages/vant/src/swipe/test/index.spec.jsx +++ b/packages/vant/src/swipe/test/index.spec.jsx @@ -331,3 +331,28 @@ test('should render indicator slot correctly', async () => { await later(); expect(wrapper.html()).toMatchSnapshot(); }); + +test('should emit drag-start and drag-end events correctly', async () => { + const dragStart = jest.fn(); + const dragEnd = jest.fn(); + const wrapper = mount({ + render() { + return ( + + 1 + 2 + + ); + }, + }); + + const track = wrapper.find('.van-swipe__track'); + + await triggerDrag(track, 100, 0); + expect(dragStart).toHaveBeenCalledTimes(1); + expect(dragEnd).toHaveBeenCalledTimes(1); + + await triggerDrag(track, 100, 0); + expect(dragStart).toHaveBeenCalledTimes(2); + expect(dragEnd).toHaveBeenCalledTimes(2); +});