init

hook/useColumnCount.js

@@ -0,0 +1,71 @@
+// composables/useColumnCount.js
+import {
+    ref,
+    onMounted,
+    onUnmounted,
+    watch
+} from 'vue'
+
+export function useColumnCount(onChange = () => {}) {
+    const columnCount = ref(0)
+    const columnSpace = ref(2)
+
+
+    // const calcColumn = () => {
+    //     const width = uni.getSystemInfoSync().windowWidth
+    //     console.log(width)
+    //     const count = Math.min(5, Math.floor(width / 375) + 1)
+    //     if (count !== columnCount.value) {
+    //         columnCount.value = count < 2 ? 2 : count
+    //     }
+    // }
+    const calcColumn = () => {
+        const width = uni.getSystemInfoSync().windowWidth
+
+        let count = 2
+        if (width >= 1000) {
+            count = 5
+        } else if (width >= 750) {
+            count = 4
+        } else if (width >= 500) {
+            count = 3
+        } else {
+            count = 2
+        }
+
+        if (count !== columnCount.value) {
+            columnCount.value = count
+        }
+
+        // 计算间距：count=2 => 1，count=5 => 2，中间线性插值
+        const spacing = 2 - (count - 2) * (1 / 3)
+        // console.log('列数:', count, '间距:', spacing.toFixed(2))
+        columnSpace.value = spacing
+    }
+
+    onMounted(() => {
+        columnCount.value = 2
+        calcColumn()
+        // if (process.client) {
+        window.addEventListener('resize', calcColumn)
+        // }
+    })
+
+    onUnmounted(() => {
+        // if (process.client) {
+        window.removeEventListener('resize', calcColumn)
+        // }
+    })
+
+    // 列数变化时执行回调
+    watch(columnCount, (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+            onChange(newVal)
+        }
+    })
+
+    return {
+        columnCount,
+        columnSpace
+    }
+}