WaterfallPane 瀑布流容器
适用于需要无限滚动来进行数据翻页操作的场景,自带美化滚动条和数据去重等功能。
使用提醒
组件内滚动条组件不支持动态高度,所以组件需要有初始高度值(无论是组件自身高度或者继承自父级dom的高度)。
基础用法
数据去重
对于短期内数据会有变动接口,在分页请求过程中会出现数据重复的情况。这种场景下可以利用unique-key对数据进行去重
数据到底允许重新请求以及定制提示文字
Attributes
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| loading | boolean | 是否在加载中 | -- | -- |
| unique-key | string | 数据项需要去重时使用的key,适用于对象数组 | -- | -- |
| data | any[] | 列表数据数组。为对象数组时可以利用unique-key去重 | -- | -- |
| total | number | 数据的总条数,非必要。如果提供了有效值并且(去重)数据条数大于等于总数时,滚动条滚动到底部时不再触发 | -- | -- |
| load | Function | 滚动条到达底部时会调用的函数。loading值为true, total小于(去重)数据条数 时不会触发。 | -- | -- |
| load-ignore-total | boolean | 是否无视total的限制(total的显示逻辑仍然有效)。适用于数据全部获取后,仍需要利用再次滚动刷新数据的场景 | -- | -- |
| loading-icon | string | 加载中状态的图标class | -- | 'el-icon-loading' |
| debounce-wait | number | 节流时延,单位为ms | -- | 300 |
| no-more-data | boolean | 组件内部是通过total和(去重)数据条数的比较来判断是否无更多数据,对于存在数据去重的情况下,这个对比可能不会准确,可设置此属性为true以覆盖内部逻辑 | true | -- |
| trigger-pixel | number | 滚动条触发“到底”事件时离底部的像素值(阀值) | -- | 5 |
| tips-texts | object | 各状态描述文字的对象 | 见 文本详情 | -- |
tips-texts
注意
列表里参数是texts对象的键名,会合并到默认值对象。不能使用短横线写法
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| loading | string | loading为true时底部显示的提示文字 | '数据加载中' |
| noMore | string | total小于等于(去重)数据条数时的提示文字 | '已经到底了' |
| getMore | string | total大于(去重)数据条数时的提示文字 | '滚动加载更多' |
| dataEmpty | string | 传入(去重)数据条数为0时的提示文字 | '暂无数据' |
Events
| 参数 | 说明 | 回调参数 |
|---|---|---|
| on-scroll-bottom | 容器滚动到底部时触发的事件,不受total和loading参数的约束 | -- |
Slots
| name | 说明 | 作用域数据 |
|---|---|---|
| -- | 默认插槽, 会传入(去重)数据。如果不需要去重也可以不使用作用域插槽上的数据,仅当作默认插槽使用 | { data } |
| bottom | 容器底部提示内容的自定义节点,绑定数据为“当前是否有滚动条”,“是否没有传入数据”,“是否没有更多数据” | { hasScroll, isEmpty, isNoMore } |