85 lines
2.2 KiB
JavaScript
85 lines
2.2 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 = () => {
|
||
// 使用新的API替代已废弃的getSystemInfoSync
|
||
let width
|
||
// #ifdef MP-WEIXIN
|
||
const mpSystemInfo = uni.getWindowInfo()
|
||
width = mpSystemInfo.windowWidth
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
const otherSystemInfo = uni.getSystemInfoSync()
|
||
width = otherSystemInfo.windowWidth
|
||
// #endif
|
||
|
||
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()
|
||
// 只在H5环境下添加resize监听器
|
||
// #ifdef H5
|
||
if (typeof window !== 'undefined') {
|
||
window.addEventListener('resize', calcColumn)
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
// #ifdef H5
|
||
if (typeof window !== 'undefined') {
|
||
window.removeEventListener('resize', calcColumn)
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
// 列数变化时执行回调
|
||
watch(columnCount, (newVal, oldVal) => {
|
||
if (newVal !== oldVal) {
|
||
onChange(newVal)
|
||
}
|
||
})
|
||
|
||
return {
|
||
columnCount,
|
||
columnSpace
|
||
}
|
||
} |