From 41fe8be1f62522324f7102e0b926de0d06219db5 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 22 Jan 2022 14:19:36 +0800 Subject: [PATCH] perf: mobile scroll, close #5191 --- .../hooks/useMobileTouchMove.ts | 49 ++++--------------- 1 file changed, 10 insertions(+), 39 deletions(-) diff --git a/components/vc-virtual-list/hooks/useMobileTouchMove.ts b/components/vc-virtual-list/hooks/useMobileTouchMove.ts index ba10fd6f4..5e6e86cee 100644 --- a/components/vc-virtual-list/hooks/useMobileTouchMove.ts +++ b/components/vc-virtual-list/hooks/useMobileTouchMove.ts @@ -1,9 +1,7 @@ -import supportsPassive from '../../_util/supportsPassive'; import type { Ref } from 'vue'; -import { watch, onMounted } from 'vue'; +import { onBeforeUnmount, watch, onMounted } from 'vue'; const SMOOTH_PTG = 14 / 15; - export default function useMobileTouchMove( inVirtual: Ref, listRef: Ref, @@ -19,15 +17,7 @@ export default function useMobileTouchMove( const cleanUpEvents = () => { if (element) { - element.removeEventListener( - 'touchmove', - onTouchMove, - supportsPassive - ? ({ - passive: false, - } as EventListenerOptions) - : false, - ); + element.removeEventListener('touchmove', onTouchMove); element.removeEventListener('touchend', onTouchEnd); } }; @@ -68,47 +58,28 @@ export default function useMobileTouchMove( touchY = Math.ceil(e.touches[0].pageY); element = e.target as HTMLElement; - element!.addEventListener( - 'touchmove', - onTouchMove, - supportsPassive - ? ({ - passive: false, - } as EventListenerOptions) - : false, - ); + element!.addEventListener('touchmove', onTouchMove, { passive: false }); element!.addEventListener('touchend', onTouchEnd); } }; + const noop = () => {}; onMounted(() => { + document.addEventListener('touchmove', noop, { passive: false }); watch( inVirtual, val => { - listRef.value.removeEventListener( - 'touchstart', - onTouchStart, - supportsPassive - ? ({ - passive: false, - } as EventListenerOptions) - : false, - ); + listRef.value.removeEventListener('touchstart', onTouchStart); cleanUpEvents(); clearInterval(interval); if (val) { - listRef.value.addEventListener( - 'touchstart', - onTouchStart, - supportsPassive - ? ({ - passive: false, - } as EventListenerOptions) - : false, - ); + listRef.value.addEventListener('touchstart', onTouchStart, { passive: false }); } }, { immediate: true }, ); }); + onBeforeUnmount(() => { + document.removeEventListener('touchmove', noop); + }); }