瀑布流

支持多列

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Props

参数	说明	类型	可选值	默认值
value	数据列表	array
column	列数量	number		2
gutter	列间隔	number		20
direction	方向	string	horizontal,vertical	horizontal
nodeKey	匹配值	string		id

Methods

事件名称	说明	参数
refresh	刷新数据	function(array)
append	追加数据	function(array)
update	更新数据，通过 nodeKey 来区分	function(nodeKey, data)
clear	清除数据

示例

cl-waterfall-column 会根据 column 的值来遍历。借用子组件来避免 v-for 下 slot 部分平台不支持的问题

<template>
	<view>
		<cl-waterfall ref="waterfall" v-model="list">
			<cl-waterfall-column v-for="(children, index) in list" :key="index">
				<view v-for="(item, index2) in children" :key="index2">
					<text>{{ item }}</text>
				</view>
			</cl-waterfall-column>
		</cl-waterfall>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		}
	};
</script>