mpMasonry

小程序瀑布流组件

基本使用

1、将components目录下中masonry文件夹复制到自己项目中。

2、添加业务组件，并在业务组件中添加property，用于承载数据

// property名必须为item
properties: {
    item: { 
        type: Object
    }
}

3、引入masonry组件和所需的业务组件

// index.json
"usingComponents": {
    "masonry": "../../components/masonry/masonry",
    "img-box": "../../components/img-box/img-box"
}

4、在wxml加入masonry节点

<!-- index.wxml -->
<masonry generic:masonry-item="img-box" id="masonry" interval-width="20rpx"></masonry>

generic:masonry-item用于指定业务组件，interval-width为左右两列空隙宽度。

5、调用函数，渲染瀑布流

_doStartMasonry(items) {
    // 通过ID，获取组件实例
    this.masonryListComponent = this.selectComponent('#masonry');
    // 调用组件的start函数，渲染瀑布流
    this.masonryListComponent.start(items).then(() => {
        console.log('render completed')
    })
}

为保证页面显示效果，建议一次渲染不超过100个元素。

函数列表

实践案例