更新记录

1.0.0（2025-03-28） 下载此版本

1.0.0版本：高自定义的瀑布流组件

平台兼容性

uni-app

其他

参数说明

|参数名 |类型 |默认值 |说明 |

|list |Array |[] |数据源 | |keyName |String |'id' |数据唯一标识字段名 | |imageKey |String |'image'|图片字段名 | |nameKey |String |'name' |标题字段名 | |textKey |String |'text' |描述字段名 | |columnWidth |Number |345 |列宽（rpx） | |gap |Number |30 |列间距（rpx） | |itemMarginBottom |Number |20 |元素下边距（rpx） | |autoHeight |Boolean|true |是否自动计算高度 | |defaultImage |String |- |默认图片地址 | |defaultContentHeight |Number |240 |预估内容高度（rpx） |

使用示例

<template>
  <zzx-waterfall
    :list="goodsList"
    keyName="goodsId"
    imageKey="cover"
    nameKey="goodsName"
    textKey="description"
    column-width="320"
    gap="20"
    @image-loaded="handleImageLoad"
    @image-error="handleImageError"
  >
    <template #content="{ item }">
      <view class="custom-content">
        <view class="tags">
          <text v-for="tag in item.tags" :key="tag">{{tag}}</text>
        </view>
      </view>
    </template>
  </zzx-waterfall>
</template>

插槽使用示例

可使用插槽的当时进行自定义样式以及内容，使用方法为template标签内示例

提供image和content两个插槽，可完全自定义内容展示

<zzx-waterfall :list="data">
  <template #image="{ item }">
    <custom-image :src="item.picture" />
  </template>
  <template #content="{ item }">
    <custom-content :data="item" />
  </template>
</zzx-waterfall>