Waterfall 瀑布流

介绍

多栏布局中动态更新不等高节点位置，用于适用于展示图片、卡片等内容。

基础用法

以下展示瀑布流的基础用法。

<vd-waterfall>
  <vd-waterfall-item
    v-for="(item, index) in data"
    :key="item.id"
    :index="index"
  >
    <vd-image
      :src="item.image.src"
      :width="`100%`"
      :height="item.image.height"
    />
    <view class="info">
      <view class="tit">{{ item.title }}</view>
      <view class="desc">{{ item.desc }}</view>
    </view>
  </vd-waterfall-item>
</vd-waterfall>

import { randomId, randomNumber, randomArrItem } from '@vital-design/shared';

const data = ref([
  getRandomItem(),
  getRandomItem(),
  getRandomItem(),
  getRandomItem(),
  getRandomItem(),
]);

const images = [
  '1...',
  '2...',
  '3...',
];

function getRandomItem() {
  return {
    id: randomId(),
    title: '这是标题',
    desc: '这是描述内容',
    image: {
      src: randomArrItem(images),
      height: randomNumber(100, 260),
    },
  }
}

.vd-waterfall-item {
  border-radius: $vd-radius-lg;
  background: $vd-background;
  box-shadow: 0 3px 6px 0 $vd-color-shadow-2;
  overflow: hidden;

  .info {
    padding: $vd-padding-xs $vd-padding-sm;

    .tit {
      margin-bottom: $vd-gap-sm;
      color: $vd-color-text;
      font-size: $vd-font-size-md;
      font-weight: bold;
    }

    .desc {
      color: $vd-color-text-3;
      font-size: $vd-font-size-sm;
      line-height: $vd-line-height-sm;
    }
  }

  // ed
}

自定义列数，行/列间距

通过 columns 属性来设置一行展示的列数，row-gap 属性来设置行间距，column-gap 属性来设置列间距。

<vd-waterfall
  :columns="3"
  row-gap="8"
  column-gap="8"
>
  ...
</vd-waterfall>

API

Waterfall Props

参数	说明	类型	默认值
columns	展示列数	string | number	2
row-gap	网格行间距	string | number	8
column-gap	网格列间距	string | number	8
animated	是否开启动画	boolean	true

WaterfallItem Props

参数	说明	类型	默认值
index	索引，小程序下循环列表时需要设置该值	string | number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Waterfall Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
resize	尺寸更新时触发	NodeSize

WaterfallItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
resize	尺寸更新时触发	NodeRect

Waterfall Slots

名称	说明
default	瀑布流项内容

WaterfallItem Slots

名称	说明
default	自定义内容