uni-app瀑布流布局加无限滚动要怎么实现

分类：uni-app

请问uni-app要怎么实现瀑布流布局，我原来有2种实现方式。
1.利用new Image对象，实现图片预加载，然后用Promise.all，当图片全部加载完毕，再判断最低列的高度，动态添加。
但是uni-app是没有Image对象的，因此这个方案不行。

在后端获取图片的高度，我也确实这么做了。但是我发现即使获取了图片高度，也无法动态添加高度。因为我用的是upx单位，
动态添加的话，就要用计算属性。但是计算属性无法给每个view，添加不同的高度。
所以到底要怎么实现瀑布流布局呢。
希望大佬解惑

2019-04-30 23:38 负责人:无分享

5 个回复

假设你的是三列瀑布流，将三个父级view设为

display: inline-block;

，然后再使用API：

uni.createSelectorQuery().selectAll('.class')

，获取每个父级的高度，再根据高度的插入到对应的data里面进行渲染就好了。
图片高度不用去算，直接使用图片模式mode="widthFix"就好，宽度100%，高度自适应。

5***@qq.com (作者)

但是图片是异步加载的，在我获取高度的时候，图片还没有加载完毕。

2019-05-03 23:06
不是发哥

回复 5***@qq.com: 这好像就有点难度了，图片没加载完，图片高度又不固定，你完全没办法准确判断它的高度及盒子的高度。还有一种办法就是，让后台告诉你图片的原始宽高，再根据uni.upx2px()进行高度转换。

2019-05-08 10:25