npm下载量：

欢迎使用 c-waterfall-flow

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=23638
npm i c-waterfall-flow

使用方法

<template>
	<view class="box" style="padding: 0 24rpx;">
		<c-waterfall-flow :list="goods">
			<template #left="{ leftList }">
				<!-- v-for的key值，如果数组有唯一值，使用唯一值，如果没有建议使用item.vueKeyVal，不要使用index -->
				<!-- <list>是自己定义的组件 -->
				<list :list="leftList" />
			</template>
			<template #right="{ rightList }">
				<view class="" style="margin-left: 16rpx;">
					<list :list="rightList" />
				</view>
			</template>
		</c-waterfall-flow>
	</view>
</template>

<script>
	// 以下导入方式按照安装方式导入，二选一
	// 插件市场导入方法：无需引入，可直接使用
	// npm导入方法如下：
	import cWaterfallFlow from "c-waterfall-flow/components/c-waterfall-flow/c-waterfall-flow.vue";
	// list自己定义的组件
	import list from "./components/list.vue";
    export default {
		// npm导入需要添加components，插件市场导入不需要
        components: {
            cWaterfallFlow,
			list
        },
        data() {
            return {
                goods: []
            }
        },
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				// 请求接口获取数据
			}
		}
    }
</script>

API

Props

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |list|要渲染成瀑布流的数组|Array|[]|-|

Events

|事件名|说明|回调参数| |--|--|--| |renderSuccess|渲染完成回调|-|