隐藏重新渲染的时候,初始化位置会错位,数据为动态数据
https://github.com/hugeorange/waterfalljs/assets/32925657/9a37f5eb-cdc3-4fc1-9bc0-67397847967c
具体请看vcr
@Aliujiayu 点击取消按钮是做了什么操作? 能不能提供一个最小化复现的 demo,用 codesandbox 或是 stackblitz
mode='grid'好使,position有问题,
点击取消的时候仅仅只是将uploadList置为空数组
<Waterfall mode='grid' columnWidth={168} columnCount={2} columnGap={10} rowGap={10} customStyle={customStyle} onChangeUlMaxH={(h) => (ulMaxHRef.current = h)} > {uploadList.length > 0 && uploadList.map((page, index) => { return ( <li key={index}> <div className={uploadIndex == index ? "border-solid border-1px border-#FF7E00 cursor-pointer" : "cursor-pointer"} > <img src={page.imageUrl.split("?")[0]} alt="" style={{ height: 30*index*0.3 + "px" }} onClick={() => { if(uploadIndex == index) { stateChange("uploadIndex", -1); return } stateChange("uploadIndex", index); }} /> </div> </li> ) })} </Waterfall>
@Aliujiayu 兄弟,稍微走心一点,不愿意搞 codesandbox ,好歹把代码格式化一下再发出来🥹🥹
position 失效的原因是: position 是因为组件在初始化时已经计算过各个item的位置信息了,position方案需要把每个 item 的 left top 都计算出来才能布局,因为你之前已经计算过了,你只是把数据清空,但之前计算过的信息还在那里,所以你再次填充数据的时候他会继续你之前计算过的往下计算.
解决方案你重新加载一下 waterfall 组件 方法:给 waterfall 组件加个 key 当你清空数据的时候去改变 key
另外, grid 没问题是因为 grid 不需要计算位置信息,只是单纯的css布局,所以不会有问题
啊,骚瑞啊,不咋提issues,我选了code,以为是发出去代码就格式了,直接cv进去了,没想到是乱的,不过我整块cv的,就里面我的代码是啥无所谓,就没再改,以后注意... 失效原因我大概猜出来了,感谢解答,我试试改变key
@Aliujiayu 兄弟如果好使的话,来个 star ,不过分吧😅
不好意思,好不好使都应该点个,现在点
我给加了个随机数,应该每次重新渲染的时候都会变,position模式下情况还是偏的离谱,但加了key之后解决了grid模式下的另一个问题,我这个组件要兼顾图片和视频,每次切换的时候,另一个都会跑偏的比较离谱,加了key以后,这个问题没了,证明key是生效的。
然后我这边有一个新问题,和上面那个无关,我li>div下面是video的时候,没法撑成视频的高度(第一次打开是视频的时候也是,这里没涉及到切换),这个不知道怎么修改,我平时布局为flex,grid基本不使用,请帮忙指点一下,感谢!
用 https://codesandbox.io/ 做一个最小化的复现 demo,我帮你看一下,不然你这么描述我也猜不到你遇到啥问题 @Aliujiayu
暂时我先搞定了,但肯定还有问题,目前先凑合一下,先谢谢作者了,我主要是不会用codesandbox🤣,等我把这个项目忙完了,在专门琢磨一下这个,谢谢哈,方便的话能否加个微信,那样沟通方便一点,再次感谢