71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
|
// 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
|
|||
|
|
}
|
|||
|
|
}
|