feat(Swipe): add drag-start, drag-end event (#11502)

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
 

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
 

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<HTMLElement>();
@@ -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();
     };
 

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 (
+        <Swipe onDragEnd={dragEnd} onDragStart={dragStart}>
+          <SwipeItem>1</SwipeItem>
+          <SwipeItem>2</SwipeItem>
+        </Swipe>
+      );
+    },
+  });
+
+  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);
+});