1

pages/index/utils.js

@@ -0,0 +1,79 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useElementSize(targetSelector) {
+  const width = ref(0)
+  const height = ref(0)
+  let observer = null
+
+  const updateSize = () => {
+    const query = uni.createSelectorQuery()
+    query.select(targetSelector).boundingClientRect(rect => {
+      if (rect) {
+        width.value = rect.width
+        height.value = rect.height
+      }
+    }).exec()
+  }
+
+  onMounted(() => {
+    updateSize()
+    // 尝试使用 ResizeObserver（部分小程序基础库支持）
+    if (uni.createIntersectionObserver) {
+      observer = uni.createIntersectionObserver(this, {
+        observeAll: true
+      })
+      observer.relativeToViewport().observe(targetSelector, updateSize)
+    }
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+
+  return { width, height, updateSize }
+}
+
+export function useEventListener(target, event, handler) {
+  // 组件内事件
+  if (target.$on) {
+    target.$on(event, handler)
+    const stop = () => target.$off(event, handler)
+    onUnmounted(stop)
+    return stop
+  }
+  // 全局事件（需配合 uni.$emit 使用）
+  else {
+    uni.$on(event, handler)
+    const stop = () => uni.$off(event, handler)
+    onUnmounted(stop)
+    return stop
+  }
+}
+
+
+export function useRafFn(fn, { immediate = true } = {}) {
+  let isActive = false
+  let timerId = null
+
+  const loop = () => {
+    if (!isActive) return
+    fn()
+    timerId = setTimeout(loop, 16) // 模拟 60fps
+  }
+
+  const start = () => {
+    if (isActive) return
+    isActive = true
+    loop()
+  }
+
+  const stop = () => {
+    isActive = false
+    clearTimeout(timerId)
+  }
+
+  onUnmounted(stop)
+  immediate && start()
+
+  return { start, stop }
+}