评论

小程序瀑布流的一种实现

小程序瀑布流

在小程序中由于图片组件为固定宽高,所以无法像网页中一样简单的实现瀑布流布局

但是image组件可以设置mode为widthFix,为图片设置固定高度后,可以自适应高度

如果是两栏瀑布流布局

就先定义两个view,让其float: left(高度不会随父组件高度)

获取到新数据后,循环新数据,通过 wx.createSelectorQuery() 获取两个view的高度,将数据中的一项push入矮的一项

不断循环添加子项就能够达到瀑布流的效果

注意事项:

在瀑布流最后的外面要清除浮动,防止影响后面的布局

在设置单项时,要在setData的回调方法中再去执行下一项,保证能够让下次获取的高度正确

最后效果如下

代码片段:https://developers.weixin.qq.com/s/d9MnuWmw7WGm

最后一次编辑于  2023-03-24  
点赞 1
收藏
评论

2 个评论

登录 后发表内容