Closed blackomilk closed 6 months ago
我案例的这种?https://heikaimu.github.io/vue3-waterfall-plugin/#/page-a
对,差不多这种的展示效果
那你可以看看我example里面的代码。
那你可以看看我example里面的代码。
没有计算卡片高度不会引起卡片折叠吗,我这边如果进页面显示列表之前不计算卡片应该显示的高度的话就会折叠或者重排一下。
只要不是图片,一般来说不会被折叠,你的那个头像小图标写好宽度高度就行。
只要不是图片,一般来说不会被折叠,你的那个头像小图标写好宽度高度就行。
我说的折叠是卡片容器会重叠,然后滑动到这块的时候卡片容器才移动到正确位置去,能看到移动这个动作。加上计算卡片容器高度的逻辑就不会这样了。但是卡片容器高度一进来就算好了,图片就占满了卡片容器,导致用户头像那一行信息被挤出卡片容器了
布局计算在列表第一次富值的时候就会执行,这个时候会获取容器的高度,这个时候如果你里面的内容是文字这些,高度是能获取到的。只有图片这种在没有完全加载好的时候没法正确的获取到位置。你容器内如果有div块,并且块的高度写死了,这种也都是能在第一时间拿到的。
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2024年4月7日(星期天) 下午2:54 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [heikaimu/vue3-waterfall-plugin] 关于列表卡片样式问题 (Issue #60)
只要不是图片,一般来说不会被折叠,你的那个头像小图标写好宽度高度就行。 image.png (view on web) 我说的折叠是卡片容器会重叠,然后滑动到这块的时候卡片容器才移动到正确位置去,能看到移动这个动作。加上计算卡片容器高度的逻辑就不会这样了。但是卡片容器高度一进来就算好了,图片就占满了卡片容器,导致用户头像那一行信息被挤出卡片容器了 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>
你说的“计算卡片容器高度的逻辑”是什么代码?
你说的“计算卡片容器高度的逻辑”是什么代码? <Waterfall :list="picList" :gutter="0" class="pic_list" :breakpoints="{ 999999: { rowPerView: 9 }, 5100: { rowPerView: 8 }, // 6144 4240: { rowPerView: 7 }, // 5120 3200: { rowPerView: 6 }, // 3840 2150: { rowPerView: 5 }, // 2560 1690: { rowPerView: 5 }, // 1920 1310: { rowPerView: 4 }, // 1536 1210: { rowPerView: 4 }, // 1440 989: { rowPerView: 3 }, 768: { rowPerView: 2 }, // ipad 550: { rowPerView: 1 }, // phone }" :animationDelay="0" :animationDuration="0" :crossOrigin="false" :hasAroundGutter="false" ref="masonry" animationPrefix="animated" v-if="picList.length"
<template #item="{ item }"> <div class="item" @click="toPicDetail(item)" v-if="item.img_url"> <div class="works" v-if="item.size.showHeight" :style="{ height: item.size.showHeight + 'Px' }"
<LazyImg :url="url + item.img_url" ref="lazyImg" />
你说的“计算卡片容器高度的逻辑”是什么代码?
把user-info放works容器外面去
把user-info放works容器外面去
好了,感谢
👌
已解决
业务场景是,进入页面时根据图片的宽高计算瀑布流每个card的高度。但是计算完高度后图中红框圈起来的用户信息部分就只能使用绝对定位现在是最上层,如果不使用绝对定位就会被图片挤出父元素的可视范围。怎么才能让图片跟用户信息部分并列显示呢