update 解决商品广场瀑布流两列长度跨度大问题

peng

16 小时以前 4ffe82b5315aa3a15b988ea7a400dd3829bff979

 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;