c-waterfall-flow
Version:
瀑布流,带插槽,可自定义内容
68 lines (63 loc) • 1.81 kB
Markdown
npm下载量:
# 欢迎使用 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|渲染完成回调|-|