chore: adjust useLockScroll、useLazyRender

src/composition/use-lazy-render.ts

@@ -1,13 +1,17 @@
-import { ref, isRef, watch, WatchSource } from 'vue';
+import { ref, watch, WatchSource, VNode } from 'vue';
 
 export function useLazyRender(show: WatchSource<boolean>) {
-  const inited = ref(isRef(show) ? show.value : show());
+  const inited = ref(false);
 
-  watch(show, (value) => {
-    if (value) {
-      inited.value = value;
-    }
-  });
+  watch(
+    show,
+    (value) => {
+      if (value) {
+        inited.value = value;
+      }
+    },
+    { immediate: true }
+  );
 
-  return inited;
+  return (render: () => VNode) => () => (inited.value ? render() : null);
 }

src/composition/use-lock-scroll.ts

@@ -1,55 +1,25 @@
-import { useTouch } from './use-touch';
-import { getScroller } from '../utils/dom/scroll';
-import { on, off, preventDefault } from '../utils/dom/event';
-
 let count = 0;
+
 const CLASSNAME = 'van-overflow-hidden';
 
-export function useLockScroll(element: HTMLElement) {
-  const { start, move, deltaY, direction } = useTouch();
-
-  const onTouchMove = ((event: TouchEvent) => {
-    move(event);
-
-    if (direction.value !== 'vertical') {
-      return;
-    }
-
-    let prevent = false;
-    const up = deltaY.value < 0;
-    const scroller = getScroller(event.target as HTMLElement, element);
-    const { scrollTop, scrollHeight, offsetHeight } = scroller as HTMLElement;
-
-    if (scrollTop === 0) {
-      prevent = up && offsetHeight < scrollHeight;
-    } else if (scrollTop + offsetHeight >= scrollHeight) {
-      prevent = !up;
-    }
-
-    if (prevent) {
-      preventDefault(event, true);
-    }
-  }) as EventListener;
-
+export function useLockScroll(shouldLock: () => boolean) {
   const lock = () => {
-    if (!count) {
-      document.body.classList.add(CLASSNAME);
-    }
-
-    count++;
-    on(document, 'touchstart', start);
-    on(document, 'touchmove', onTouchMove);
-  };
-
-  lock();
-
-  return function unlock() {
-    count--;
-    off(document, 'touchstart', start);
-    off(document, 'touchmove', onTouchMove);
-
-    if (!count) {
-      document.body.classList.remove(CLASSNAME);
+    if (shouldLock()) {
+      if (!count) {
+        document.body.classList.add(CLASSNAME);
+      }
+      count++;
     }
   };
+
+  const unlock = () => {
+    if (shouldLock() && count) {
+      count--;
+      if (!count) {
+        document.body.classList.remove(CLASSNAME);
+      }
+    }
+  };
+
+  return [lock, unlock];
 }