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 - 需要更新的数组下标 |
无 |
