mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix(PullRefresh): may trigger browser bounce in some cases (#10080)
This commit is contained in:
parent
d68a3820aa
commit
4cc269c1f2
@ -1,14 +1,12 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const MIN_DISTANCE = 10;
|
|
||||||
|
|
||||||
type Direction = '' | 'vertical' | 'horizontal';
|
type Direction = '' | 'vertical' | 'horizontal';
|
||||||
|
|
||||||
function getDirection(x: number, y: number) {
|
function getDirection(x: number, y: number) {
|
||||||
if (x > y && x > MIN_DISTANCE) {
|
if (x > y) {
|
||||||
return 'horizontal';
|
return 'horizontal';
|
||||||
}
|
}
|
||||||
if (y > x && y > MIN_DISTANCE) {
|
if (y > x) {
|
||||||
return 'vertical';
|
return 'vertical';
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
@ -42,13 +40,19 @@ export function useTouch() {
|
|||||||
|
|
||||||
const move = ((event: TouchEvent) => {
|
const move = ((event: TouchEvent) => {
|
||||||
const touch = event.touches[0];
|
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;
|
deltaX.value = touch.clientX < 0 ? 0 : touch.clientX - startX.value;
|
||||||
deltaY.value = touch.clientY - startY.value;
|
deltaY.value = touch.clientY - startY.value;
|
||||||
offsetX.value = Math.abs(deltaX.value);
|
offsetX.value = Math.abs(deltaX.value);
|
||||||
offsetY.value = Math.abs(deltaY.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);
|
direction.value = getDirection(offsetX.value, offsetY.value);
|
||||||
}
|
}
|
||||||
}) as EventListener;
|
}) as EventListener;
|
||||||
|
@ -290,16 +290,8 @@ export default defineComponent({
|
|||||||
if (props.touchable && state.swiping) {
|
if (props.touchable && state.swiping) {
|
||||||
touch.move(event);
|
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) {
|
if (isCorrectDirection.value) {
|
||||||
|
preventDefault(event, props.stopPropagation);
|
||||||
move({ offset: delta.value });
|
move({ offset: delta.value });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user