flat: 兼容平板、等超宽屏幕

hook/useColumnCount.js

@@ -8,13 +8,39 @@ import {
 
 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
-        const count = Math.min(5, Math.floor(width / 375) + 1)
+
+        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(() => {
@@ -40,5 +66,6 @@ export function useColumnCount(onChange = () => {}) {
 
     return {
         columnCount,
+        columnSpace
     }
 }

index.html

@@ -18,7 +18,7 @@
         </script>
         <title></title>
         <!-- vconsole -->
-        <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+        <!--     <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
         <script>
             var vConsole = new window.VConsole();
             vConsole.destroy();

pages.json

@@ -234,12 +234,12 @@
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
         "navigationBarBackgroundColor": "#F8F8F8",
-        "backgroundColor": "#F8F8F8"
+        "backgroundColor": "#F8F8F8",
         // "enablePullDownRefresh": false,
         // "navigationStyle": "custom",
-        // "rpxCalcBaseDeviceWidth": 3840,
+        "rpxCalcBaseDeviceWidth": 375,
-        // "rpxCalcMaxDeviceWidth": 3840,
+        "rpxCalcMaxDeviceWidth": 750,
-        // "rpxCalcIncludeWidth": 750
+        "rpxCalcIncludeWidth": 750
     },
     "uniIdRouter": {}
 }

pages/index/index.vue

@@ -67,7 +67,12 @@
         <view class="table-list">
             <scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
                 <view class="falls" v-if="list.length">
-                    <custom-waterfalls-flow :column="columnCount" ref="waterfallsFlowRef" :value="list">
+                    <custom-waterfalls-flow
+                        :column="columnCount"
+                        :columnSpace="columnSpace"
+                        ref="waterfallsFlowRef"
+                        :value="list"
+                    >
                         <template v-slot:default="job">
                             <view class="item btn-feel" v-if="!job.recommend">
                                 <view class="falls-card" @click="nextDetail(job)">
@@ -187,7 +192,7 @@ const rangeOptions = ref([
 //     { name: '创意总监', highlight: false },
 // ]);
 
-const { columnCount } = useColumnCount(() => {
+const { columnCount, columnSpace } = useColumnCount(() => {
     pageState.pageSize = 10 * (columnCount.value - 1);
     getJobRecommend('refresh');
     nextTick(() => {
@@ -726,4 +731,4 @@ function dataToImg(data) {
 .isBut{
     filter: grayscale(100%);
 }
-</style>
+</style>