UNPKG

c-waterfall-flow

Version:

瀑布流,带插槽,可自定义内容

68 lines (63 loc) 1.81 kB
npm下载量:![downloads](https://img.shields.io/npm/dt/c-waterfall-flow) # 欢迎使用 c-waterfall-flow ## 安装 ```javascript // npm安装方式,插件市场导入无需执行此命令。插件市场导入地址:https://ext.dcloud.net.cn/plugin?id=23638 npm i c-waterfall-flow ``` ## 使用方法 ```javascript <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|渲染完成回调|-|