上传者: 38722944
|
上传时间: 2022-05-06 13:15:30
|
文件大小: 78KB
|
文件类型: PDF
网上能搜到的小程序瀑布流解决方案,要么代码复杂、逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下。
最简单的实现方案,不适用有分页的场景。
这个方案简单的原因是因为仅仅使用了css的属性。
使用column-count 属性可以指定页面显示的列数,一般瀑布流都是2列,所以可以定义class
.list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列间距
}
界面定义也很简单
<block wx:for="{{goodsList}}" wx: