ks-app-employment-service/hook/useColumnCount.js

// 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
    }
}