From 4ffe82b5315aa3a15b988ea7a400dd3829bff979 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 23 六月 2025 15:33:20 +0800
Subject: [PATCH] update 解决商品广场瀑布流两列长度跨度大问题
---
pages/commodity-square/commoditySquare.vue | 48 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 45 insertions(+), 3 deletions(-)
diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue
index 2fdf32b..f5ac205 100644
--- a/pages/commodity-square/commoditySquare.vue
+++ b/pages/commodity-square/commoditySquare.vue
@@ -75,6 +75,9 @@
export default {
data() {
return {
+ //璁板綍涓ゅ垪楂樺害
+ listHeight1: 0,
+ listHeight2: 0,
//鏄惁鏄剧ず鎵撳紑宸︿晶寮圭獥
showLeft: false,
//鍟嗗搧瀵艰埅鍒嗙被
@@ -126,9 +129,24 @@
const height = e.detail.height;
this[arrName][index].width = 310 + 'rpx';
//璁＄畻瀹介珮姣�
- const videoHeight = 310 / (wight / height)
- this[arrName][index].height = Math.floor(videoHeight) + 'rpx';
+ const videoHeight = Math.floor(310 / (wight / height))
+ this[arrName][index].height = videoHeight + 'rpx';
this[arrName][index].show = true;
+ //璁＄畻闆嗗悎楂樺害
+ if (arrName === 'goodsList2') {
+ if (videoHeight > 300) {
+ this.listHeight2 += videoHeight;
+ } else if (videoHeight < 300) {
+ this.listHeight2 -= videoHeight;
+ }
+ }
+ if (arrName === 'goodsList1') {
+ if (videoHeight > 300) {
+ this.listHeight1 += videoHeight;
+ } else if (videoHeight < 300) {
+ this.listHeight1 -= videoHeight;
+ }
+ }
console.log(this[arrName][index].width, this[arrName][index].height)
this.flushDom = new Date();
},
@@ -158,11 +176,35 @@
item.goodsVideo = stsUrl + '/' + item.goodsVideo
}
})
+ //璁＄畻涓や釜鏁扮粍鐨勯暱搴� 鐢ㄤ簬瑙ｅ喅鐎戝竷娴佷袱杈归珮搴︿笉涓�鑷撮棶棰�
//骞冲垎缁欎袱涓暟缁�
- const middle = Math.ceil(goodsList.data.result.records.length / 2);
+ const goodsSize = goodsList.data.result.records.length;
+ let middle = Math.ceil(goodsSize / 2);
+ //鍒ゆ柇閭ｄ釜闆嗗悎闀垮害楂� 閲嶆柊鍒嗛厤闆嗗悎鏁版嵁
+ const diffHeight = this.listHeight1 - this.listHeight2;
+ //list1闀垮害澶т簬list2
+ if (diffHeight > 0) {
+ const needCount = Math.floor(diffHeight / 300)
+ if (needCount > 6) {
+ middle = 0;
+ } else {
+ middle -= needCount;
+ }
+ } else if(diffHeight < 0) {
+ const needCount = Math.abs(Math.floor(diffHeight / 300))
+ if (needCount > 6) {
+ middle += 6
+ } else {
+ middle = needCount;
+ }
+ }
this.goodsList1 = [...this.goodsList1, ...goodsList.data.result.records.slice(0, middle)];
this.goodsList2 = [...this.goodsList2, ...goodsList.data.result.records.slice(middle)];
this.maxPages = goodsList.data.result.pages
+
+ // if(this.listHeight1===0||this.listHeight2===0)}
+ this.listHeight1 += middle * 300;
+ this.listHeight2 += (goodsSize - middle) * 300
},
async chooseCategory(id) {
this.canLoadMore = false;
--
Gitblit v1.8.0