feat(common): ✨ 添加工具

2026-04-20 17:54:26 +08:00
parent 7ff223fa32
commit b10d613987
64 changed files with 8342 additions and 16243 deletions
@@ -0,0 +1,45 @@
+/*
+ * @file /src/vue3/hooks/top-sticky.ts
+ * @description 吸顶工具
+ * @author tsl (randy1924@163.com)
+ * @date 2026-03-20 17:51:50
+ * @lastModified 2026-03-26 10:24:21
+ * @lastModifiedBy tsl (randy1924@163.com)
+ */
+
+import { ref } from "vue";
+
+export interface UseTopStickyOptions {
+  context?: never;
+  offsetTop?: number;
+  targetSelector: string;
+  onToTopChange?: (toTop: boolean) => void;
+}
+
+export function useTopSticky(options: UseTopStickyOptions) {
+  const context = options.context;
+  const offsetTop = options.offsetTop ?? 0;
+  const targetSelector = options.targetSelector;
+  const onToTopChange = options.onToTopChange;
+
+  // 是否达到了顶部
+  const isToTop = ref(false);
+
+  const systemInfo = uni.getSystemInfoSync();
+  const intersectionObserver = uni.createIntersectionObserver(context);
+
+  // 观察目标元素
+  intersectionObserver
+    .relativeToViewport({
+      top: 0,
+      bottom: -systemInfo.windowHeight + offsetTop,
+    })
+    .observe(targetSelector, (res) => {
+      console.log("intersectionObserver", res);
+      // 当目标与视口顶部距离小于0px时，isToTop 设为 true
+      isToTop.value = res.intersectionRatio > 0;
+      onToTopChange?.(isToTop.value);
+    });
+
+  return { isToTop };
+}