fix(PullRefresh): may trigger browser bounce in some cases (#10080)

This commit is contained in:
neverland 2021-12-21 20:59:30 +08:00 committed by GitHub
parent d68a3820aa
commit 4cc269c1f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 15 deletions

View File

@ -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;

View File

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