更新记录

1.0.2（2025-05-29） 下载此版本

更新字段名称，避免混淆

1.0.1（2025-05-29） 下载此版本

更新文档说明

1.0.0（2025-05-29） 下载此版本

初次发布

平台兼容性

uni-app

其他

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

Events