ScrollPane 瀑布流容器
适用于需要无限滚动来进行数据翻页操作的场景,自带美化滚动条和数据去重等功能。
使用提醒
组件内滚动条组件不支持动态高度,所以组件需要有初始高度值(无论是组件自身高度或者继承自父级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的显示逻辑仍然有效)。适用于数据全部获取后,仍需要利用再次滚动刷新数据的场景 | -- | -- |
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 } |
loadingIcon | 加载中状态的图标 |