# Waterfall 瀑布流 0.15.0+

用于实现瀑布流效果

# 用法

# 基础用法

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果示例：

# 属性

# portrait

类型：Number
默认值：1
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height" :portrait="2">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

竖屏列数，效果示例：

# landscape

类型：Number
默认值：2
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height" :landscape="3">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

横屏列数，效果示例：

# key-name

类型：String
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

可唯一标识数据数组项的字段

# 插槽

# default

参数：
- {Object} item - 完整数据项
- {Number} col - 第几列
- {Number} index - 当前列中的第几个
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 方法

# reset(data)

参数：
- {Array} data - 瀑布流初始数据
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

用于初始化或重置瀑布流

# appendData(data)

参数：
- {Array} data - 瀑布流追加数据
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <button @click="appendWaterfall">Append Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },

      appendWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.appendData(data)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

用于追加瀑布流数据

# delete(col, index)

参数：
- {Number} col - 数据所在的列
- {Number} index - 数据在其列中的索引
用法：

<template>
  <button @click="showWaterfall">Waterfall</button>
  <sui-waterfall ref="waterfall" key-name="height">
    <template #default="{ item, col, index }">
      <div
        :style="{ 'height': `${ item.height }px`, 'background': '#999', 'margin': `10px` }"
        @click="deleteWaterfallData(col, index)"
      ></div>
    </template>
  </sui-waterfall>
</template>

<script>
  export default {
    methods: {
      showWaterfall() {
        let data = []
        for (let i = 0; i < 8; i++) {
          data.push({
            height: Number.parseInt(Math.random() * 200),
          })
        }
        this.$refs.waterfall.reset(data)
      },

      deleteWaterfallData(col, index) {
        this.$refs.waterfall.delete(col, index)
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

用于删除某条数据

← Toast 提示 Change Log →