diff --git a/hook/useColumnCount.js b/hook/useColumnCount.js index d7a228b..d96017e 100644 --- a/hook/useColumnCount.js +++ b/hook/useColumnCount.js @@ -19,37 +19,47 @@ export function useColumnCount(onChange = () => {}) { // 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 + 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) { + // #ifdef H5 + count = 3 // H5端最多显示3列 + // #endif + // #ifndef H5 + count = 5 + // #endif + } else if (width >= 750) { + // #ifdef H5 + count = 3 // H5端最多显示3列 + // #endif + // #ifndef H5 + count = 4 + // #endif + } 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(() => {