Comments (8)
@Aliujiayu 点击取消按钮是做了什么操作?
能不能提供一个最小化复现的 demo,用 codesandbox 或是 stackblitz
from waterfalljs.
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>
from waterfalljs.
@Aliujiayu 兄弟,稍微走心一点,不愿意搞 codesandbox ,好歹把代码格式化一下再发出来🥹🥹
position 失效的原因是: position 是因为组件在初始化时已经计算过各个item的位置信息了,position方案需要把每个 item 的 left top 都计算出来才能布局,因为你之前已经计算过了,你只是把数据清空,但之前计算过的信息还在那里,所以你再次填充数据的时候他会继续你之前计算过的往下计算.
解决方案你重新加载一下 waterfall 组件
方法:给 waterfall 组件加个 key 当你清空数据的时候去改变 key
另外, grid 没问题是因为 grid 不需要计算位置信息,只是单纯的css布局,所以不会有问题
from waterfalljs.
啊,*瑞啊,不咋提issues,我选了code,以为是发出去代码就格式了,直接cv进去了,没想到是乱的,不过我整块cv的,就里面我的代码是啥无所谓,就没再改,以后注意...
失效原因我大概猜出来了,感谢解答,我试试改变key
from waterfalljs.
@Aliujiayu 兄弟如果好使的话,来个 star ,不过分吧😅
from waterfalljs.
不好意思,好不好使都应该点个,现在点
![image](https://private-user-images.githubusercontent.com/32925657/345278458-e3bde2ea-2fef-4b6e-8f45-1538477b6873.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NTYxODQsIm5iZiI6MTcyNTQ1NTg4NCwicGF0aCI6Ii8zMjkyNTY1Ny8zNDUyNzg0NTgtZTNiZGUyZWEtMmZlZi00YjZlLThmNDUtMTUzODQ3N2I2ODczLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEzMTgwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRlZjJhNjAyNzhiY2I3NWQ1NTc5YzliZjY1Yjk2MDg0ZDEyMWVkZTVhNmNlMjRkMzdlZDY1NDJhZThjZmVkYTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.vd7gekm8PC16avr9qGSAQvEE_PXx92eq46bDqMS-T7U)
我给加了个随机数,应该每次重新渲染的时候都会变,position模式下情况还是偏的离谱,但加了key之后解决了grid模式下的另一个问题,我这个组件要兼顾图片和视频,每次切换的时候,另一个都会跑偏的比较离谱,加了key以后,这个问题没了,证明key是生效的。
然后我这边有一个新问题,和上面那个无关,我li>div下面是video的时候,没法撑成视频的高度(第一次打开是视频的时候也是,这里没涉及到切换),这个不知道怎么修改,我平时布局为flex,grid基本不使用,请帮忙指点一下,感谢!
from waterfalljs.
用 https://codesandbox.io/ 做一个最小化的复现 demo,我帮你看一下,不然你这么描述我也猜不到你遇到啥问题 @Aliujiayu
from waterfalljs.
暂时我先搞定了,但肯定还有问题,目前先凑合一下,先谢谢作者了,我主要是不会用codesandbox🤣,等我把这个项目忙完了,在专门琢磨一下这个,谢谢哈,方便的话能否加个微信,那样沟通方便一点,再次感谢
from waterfalljs.
Related Issues (5)
- 能不能加个骨架图渲染 HOT 1
- 能增加滚动加载新图片功能吗? HOT 2
- 如果图片下面还有其他动态分类标签如何实现瀑布流 HOT 1
- 妈呀这是什么神仙组件库啊!!! HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from waterfalljs.