diff --git a/packages/vant/src/composables/use-touch.ts b/packages/vant/src/composables/use-touch.ts index 86c28d056..ffb5e8cc5 100644 --- a/packages/vant/src/composables/use-touch.ts +++ b/packages/vant/src/composables/use-touch.ts @@ -1,14 +1,12 @@ import { ref } from 'vue'; -const MIN_DISTANCE = 10; - type Direction = '' | 'vertical' | 'horizontal'; function getDirection(x: number, y: number) { - if (x > y && x > MIN_DISTANCE) { + if (x > y) { return 'horizontal'; } - if (y > x && y > MIN_DISTANCE) { + if (y > x) { return 'vertical'; } return ''; @@ -42,13 +40,19 @@ export function useTouch() { const move = ((event: TouchEvent) => { const touch = event.touches[0]; - // Fix: Safari back will set clientX to negative number + // safari back will set clientX to negative number deltaX.value = touch.clientX < 0 ? 0 : touch.clientX - startX.value; deltaY.value = touch.clientY - startY.value; offsetX.value = Math.abs(deltaX.value); offsetY.value = Math.abs(deltaY.value); - if (!direction.value) { + // lock direction when distance is greater than a certain value + const LOCK_DIRECTION_DISTANCE = 10; + if ( + !direction.value || + (offsetX.value < LOCK_DIRECTION_DISTANCE && + offsetY.value < LOCK_DIRECTION_DISTANCE) + ) { direction.value = getDirection(offsetX.value, offsetY.value); } }) as EventListener; diff --git a/packages/vant/src/swipe/Swipe.tsx b/packages/vant/src/swipe/Swipe.tsx index 87400c217..55f772aa9 100644 --- a/packages/vant/src/swipe/Swipe.tsx +++ b/packages/vant/src/swipe/Swipe.tsx @@ -290,16 +290,8 @@ export default defineComponent({ if (props.touchable && state.swiping) { touch.move(event); - // if user starting to touchmove, prevent the event bubbling to - // avoid affecting the parent components - const shouldPrevent = - isCorrectDirection.value || - touch.offsetY.value > touch.offsetX.value === props.vertical; - if (shouldPrevent) { - preventDefault(event, props.stopPropagation); - } - if (isCorrectDirection.value) { + preventDefault(event, props.stopPropagation); move({ offset: delta.value }); } }