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

peng

6 小时以前 4ffe82b5315aa3a15b988ea7a400dd3829bff979

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

 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;