一个 小程序瀑布流组件
特点：
- 简单配置、使用方便
- 支持自定义列数
- 支持无限加载
- 可保持列表顺序
- 可支持入场动画
- 支持动态修改变节点数据
PC 端可直接打开 Demo 地址
打开链接将会自动将 demo 代码导入微信开发者工具
或下载 demo 目录导入微信开发者工具运行查看
瀑布流子元素中，有一张宽高不固定的图片和其他一些元素，后端同学又没有返回图片宽高的时候，可以尝试使用该组件 ^_^ 组件会自动判断元素高度，插入较短的列中
- 下载项目，将瀑布流组件
dist/mp-waterfall文件夹复制到自己的项目中 - 自行新建瀑布流节点组件（可参考
demo/components/waterfall-item），并在节点组件的properties中添加itemData（因为瀑布流组件会将 list 中的每一项以 itemData 传入子组件），例如：
<view class="w-item">
<!-- 组件会将图片的高度注入到 itemData 中，字段为imgHeight, 所以图片高度请设置为{{itemData.imgHeight}}px -->
<image
src="{{itemData.imgUrl}}"
style="width:100%;height:{{itemData.imgHeight}}px"
class="w-image"
/>
</view>Component({
/**
* 组件的属性列表
*/
properties: {
itemData: {
type: Object,
},
},
});- 在页面 json 中引入组件
mp-waterfall和waterfall-item，可参考demo/pages/index/index.json
{
"usingComponents": {
"mp-waterfall": "../../components/mp-waterfall",
"waterfall-item": "../../components/waterfall-item"
}
}- 在页面 wxml 中添加瀑布流组件，参数说明请看 参数
<!-- generic:item 由于本组件使用了微信小程序抽象节点特性，需要你手动指定子组件，传入自行创建的瀑布流节点组件即可 -->
<mp-waterfall
id="waterfall"
generic:item="waterfall-item"
list="{{list || []}}"
idKey="id"
imageKey="imgUrl"
></mp-waterfall>- 向
list中添加数据，即可显示瀑布流内容，简单示例：
/**
* 示例数据中的`id`、`imgUrl`并非强制要求，可根据实际情况使用自定义字段，只需要和传入组件的`idKey`,`imageKey`保持一致即可
* 如：数据中的唯一标识的key为`content_id`,图片的key为`img`，传入中间的props为 <mp-waterfall idKey="content_id" imageKey="img" 其他参数... ></mp-waterfall>
*/
Page({
data: {
// 列表数据
list: [
{
id: 1,
imgUrl: 'https://iph.href.lu/300x200?fg=ffffff&bg=07c160'
},
{
id: 2,
imgUrl: 'https://iph.href.lu/300x300?fg=ffffff&bg=07c160'
},
{
id: 3,
imgUrl: 'https://iph.href.lu/300x400?fg=ffffff&bg=07c160'
},
{
id: 4,
imgUrl: 'https://iph.href.lu/300x500?fg=ffffff&bg=07c160'
},
{
id: 5,
imgUrl: 'https://iph.href.lu/300x600?fg=ffffff&bg=07c160'
},
],
},
})- 滑动加载，直接向list中追加数据即可
| 参数 | 说明 | 是否必填 | 类型 | 默认值 |
|---|---|---|---|---|
| list | 瀑布流数据列表 | 是 | Array | [] |
| idKey | 数据项中唯一标识的 key | 是 | String | 'id' |
| imageKey | 数据项中图片的 key | 是 | String | 'image' |
| colNum | 瀑布流列数 | 否 | Number | 2 |
| gutter | 瀑布流列的左右间隔，支持 rpx,px,%等单位 | 否 | Number | String | '10rpx' |
| order | 是否顺序显示 | 否 | Boolean | true |
| 事件 | 说明 | 回调参数 |
|---|---|---|
| bind:loadingChange | 传入的 list 是否加载完毕，true:加载中、false：加载完毕 | event.detail: true/false |
| 方法 | 说明 |
|---|---|
| reset() | 若要重新加载瀑布流，需调用组件的 reset 方法，调用方法：this.selectComponent('#waterfall').reset() |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent