flash网站开发用什么语言,seo搜索引擎优化费用,怎样做商城网站的推广,最新领导班子虚拟滚动列表组件ReVirtualList 组件实现基于 Vue3 Element Plus Typescript#xff0c;同时引用 vueUse lodash-es tailwindCss (不影响功能#xff0c;可忽略) 在 ReList 的基础上#xff0c;增加虚拟列表功能#xff0c;在固定高度的基础上#xff0c;可以优化大数…虚拟滚动列表组件ReVirtualList 组件实现基于 Vue3 Element Plus Typescript同时引用 vueUse lodash-es tailwindCss (不影响功能可忽略) 在 ReList 的基础上增加虚拟列表功能在固定高度的基础上可以优化大数据列表展示 思路
滚动容器默认使用List列表的父节点需要配置 height 设置List的高度用于展示滚动条。
如果滚动容器不想使用List的父节点可以通过 scrollTarget 指定但是 height 需要设置为 auto避免List内置滚动。
通过自己封装的虚拟滚动计算hook通过监听滚动容器的滚动行为根据当前展示视图的滚动距离计算展示内容在列表数据中的数据索引从而获得展示视图对于数据的索引范围以及前置内容高度后置内容高度最后将前置内容高度后置内容高度以padding的方式设置保证滚动容器的高度始终一致。
为了优化滚动交互增加前置预加载数量和后置预加载数量最终得到的渲染数据的数据索引。
对于卡片布局可能存在网格布局多列还需要在虚拟滚动计算时加入网格列数参数进行计算得到最终的一个渲染数据索引范围。
难点
考虑网格布局时加入列数进行虚拟滚动计算
基础
通过 items 绑定全量数据自动进行虚拟滚动计算渲染。虚拟滚动需要指定列表项固定高度使用前可以通过实际渲染高度或UI设计稿高度定义默认列表项会直接使用固定高度渲染内容超出会被隐藏。 查看 /demo/list/virtual.md
卡片列表
支持网格卡片列表的虚拟滚动展示会自动根据网格数量进行虚拟滚动计算得到能够占满当前滚动视图的网格数量。 查看 /demo/list/virtual-card.md
ReVirtualList属性
字段说明类型默认值items必填列表项数据集Recordstring, any[]-metas必填列表项展示配置ReListItemMetas-title列表标题string-height列表高度不包括页头和页脚默认按像素值处理string number400skeleton是否显示骨架屏booleantruerowHeight列表项高度建议根据实际渲染指定number-type列表类型“card” “list”“list”grid响应网格仅在typecard下有效number ReGridResponsive1gutter网格间距仅在typecard下有效number [number] [number, number]16
除了上述属性支持ReList所有属性默认会被ReList实例继承
同时ReVirtualList属性也继承了CustomVirtualScrollProps属性
CustomVirtualScrollProps
字段说明类型默认值scrollTarget必填滚动容器HTMLElement (() HTMLElement)-pageSize页大小MaybeRefnumber20rowHeight列表项高度number ((index: number) number)-previewRows预加载数量默认同pageSizeMaybeRefnumber-cols多列参数作为虚拟滚动计算参数VirtualList会自动响应列表的网格数量不需要手动配置MaybeRefnumber1debounce滚动事件时延number300
ReVirtualList事件
事件名说明格式update:checks已选中列表发生变化时触发(checks: Arraystring number) voidcheck点击某个复选框时触发(checked: boolean, id: string number, item: Recordstring, any) void
ReVirtualList插槽
插槽名说明default列表项作用域插槽带有 item、metas 两个作用域变量titleList页头标题插槽extraList页头额外信息插槽footerPageList页脚插槽在分页器之前
ReVirtualList Expose
字段说明类型scrollTop当前滚动位置离容器顶部距离numberstartPadding前置占位高度numberendPadding后置占位高度numberstartIndex渲染数据开始索引numberendIndex渲染数据结束索引RefnumberscrollTo滚动到指定距离(scrollTop: number) voidscrollToIndex滚动到指定索引位置(index: number) void
源代码
Github
可以通过查看具体实现如果遇到问题可以留言或者提出issue。
hook
虚拟滚动的实现单独抽离了一个hook自行查看 hook/useVirtualScroll 方法可以利用这个hook实现自己的虚拟滚动行为。目前还是基于固定高度进行计算提供了一个rowHeight支持配置函数动态获取高度如果您需要动态高度可以试着通过这个配置项实现
如果觉得对您有帮助的话可以请小编瑞一下
