ScrollPane 瀑布流容器

适用于需要无限滚动来进行数据翻页操作的场景,自带美化滚动条和数据去重等功能。

使用提醒

组件内滚动条组件不支持动态高度,所以组件需要有初始高度值(无论是组件自身高度或者继承自父级dom的高度)。

基础用法

数据去重

对于短期内数据会有变动接口,在分页请求过程中会出现数据重复的情况。这种场景下可以利用unique-key对数据进行去重

数据到底允许重新请求以及定制提示文字

Attributes

参数类型说明可选值默认值
loadingboolean是否在加载中----
unique-keystring数据项需要去重时使用的key,适用于对象数组----
dataany[]列表数据数组。为对象数组时可以利用unique-key去重----
totalnumber数据的总条数,非必要。如果提供了有效值并且(去重)数据条数大于等于总数时,滚动条滚动到底部时不再触发----
loadFunction滚动条到达底部时会调用的函数。loading值为true, total小于(去重)数据条数 时不会触发。----
load-ignore-totalboolean是否无视total的限制(total的显示逻辑仍然有效)。适用于数据全部获取后,仍需要利用再次滚动刷新数据的场景----
debounce-waitnumber节流时延,单位为ms--300
no-more-databoolean组件内部是通过total和(去重)数据条数的比较来判断是否无更多数据,对于存在数据去重的情况下,这个对比可能不会准确,可设置此属性为true以覆盖内部逻辑true--
trigger-pixelnumber滚动条触发“到底”事件时离底部的像素值(阀值)--5
tips-textsobject各状态描述文字的对象文本详情open in new window--

tips-texts

注意

列表里参数是texts对象的键名,会合并到默认值对象。不能使用短横线写法

参数类型说明默认值
loadingstringloadingtrue时底部显示的提示文字'数据加载中'
noMorestringtotal小于等于(去重)数据条数时的提示文字'已经到底了'
getMorestringtotal大于(去重)数据条数时的提示文字'滚动加载更多'
dataEmptystring传入(去重)数据条数为0时的提示文字'暂无数据'

Events

参数说明回调参数
on-scroll-bottom容器滚动到底部时触发的事件,不受totalloading参数的约束--

Slots

name说明作用域数据
--默认插槽, 会传入(去重)数据。如果不需要去重也可以不使用作用域插槽上的数据,仅当作默认插槽使用{ data }
bottom容器底部提示内容的自定义节点,绑定数据为“当前是否有滚动条”,“是否没有传入数据”,“是否没有更多数据”{ hasScroll, isEmpty, isNoMore }
loadingIcon加载中状态的图标
Last Updated:
Contributors: wxhccche