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个元素。

函数列表

函数名	函数功能	参数说明	返回值
append	批量添加元素	{Array} items - 新增的元素数组	Promise
delete	批量删除瀑布流中的元素	{Number} start - 开始下标 {Number} end - 结束下标	无
deleteItem	删除瀑布流中的某个元素	{Number} index - 数组下标	无
start	启动组件，开始渲染瀑布流	{Array} items - 参与渲染的元素数组	Promise
stop	停止渲染瀑布流，清空数据	无	无
updateItem	更新渲染数组中的某个元素	{Object} newItem - 修改后的元素 {Number} index - 需要更新的数组下标	无

实践案例