小洋粉

like this in the old version ： 

只需要将虚拟节点中的 image标签设置属性为： mode="widthFix" lazy-load 采用不同宽高比的图片加载进去就会一边长一边短。 你们的示例代码，所有图片高度都是相等的，所以water-flow组件中 boundingClientRect 函数能够及时拿到card的高度， 如果image 属性 mode="widthFix" ，在图片加载完成完成之后，图片的高度会自行调整一次，在调整之前，boundingClientRect已经获取了所有card的高度，调整之后card高度又变了一次。。才导致这个问题。 ``` 可以将water-flow的源码这样改造一下，card两个两个上屏，就会正常。原api不变。 _init() { wx.lin = wx.lin || {}, wx.lin.renderWaterFlow = (t = [], e = !1, a)...

> _您好_，_这个问题我已经复现了。感谢您提供的解决思路_，_但您的这种解决方案好像只是相当于做了一个延时操作_，让`boundingClientRect`_在图片加载完后才获取高度_，_是这样吗_ 我的本意是使用`setTimeout`回调方式等待前2张图片完全被渲染完成，再延时调用`boundingClientRect`再渲染2张，但是实践结果发现，并不需要`setTimeout`直接for `boundingClientRect`即可。 说明只要给图片传入src，无论是否已经显示图片`boundingClientRect`都可以拿到正确的card高度值？人家内部怎么封装的咱也不知道啊。 补充，好像还是需要setTimeout做延迟，之前不需要是因为我的那几张图片高度刚好吻合。后来换了图片，长度又不一样了。 ``` _init() { wx.lin = wx.lin || {}, wx.lin.renderWaterFlow = (t = [], e = !1, a) => { const x = JSON.deep(t) //...

还有一个问题，这明显是一个无限长列表，card数量一旦多起来，会有明显的性能问题。 可以给每个card内部放一个 ` this.createIntersectionObserver().relativeToViewport({}).observe(`#card${_id}`, (res) => {})` 当这个card离开交叉口范围就自动隐藏（同时必须保留card自身高度，否则会出现塌陷）。这样就可以解决性能问题了。 但是这个代码似乎需要用户自己添加到虚拟节点内部，如果能封装进 虚拟节点的父组件，多用户隐藏，就再好不过了。