往期精彩: 前端工作7年, 聊聊工作&开源&创业
列表是一种常见的UI组件,相信大家应该都遇到过,并且也都自己实现过!不知道大家是怎么实现的,是根据业务进行CSS布局还是使用了第三方的组件。
在这里分享下自认为比较舒适的列表组件及实现思路。
代码
暂无数据
{{ item }}
加载中...
没有更多了
实现行列表只需要将item-min-width
属性配置为100%
,即表示每个item
最小宽度为容器宽度。
代码
暂无数据
{{ item }}
加载中...
没有更多了
我们创建了一个名为GridList的组件,用于展示网格卡片的效果。该组件的主要功能是处理网格布局,而不关心卡片的具体内容。
GridList组件通过data-source
属性接收数据。为了实现响应式布局,我们还提供了一些辅助属性,如item-min-width
、item-min-height
、row-gap
和column-gap
。
{{ item }}
实现响应式网格布局的关键点如下:
使用 display: grid;
将 .list
元素设置为网格布局。
grid-template-columns
属性创建了自适应的列布局。使用 repeat(auto-fill, minmax(...))
表示根据容器宽度自动填充列,并指定每列的最小和最大宽度。
grid-auto-rows
属性创建了自适应的行布局。使用 minmax(auto, ...)
表示根据内容自动调整行高度。
column-gap
和 row-gap
属性设置了网格项之间的列间距和行间距。
尽管我们的组件能够满足设计要求,但面临的最明显问题是处理大量数据时的效率问题。随着数据量的增加,接口响应速度变慢,页面可能出现白屏现象,因为 DOM 元素太多。
这时候,后端团队提出了一个合理的疑问(BB):难道我们不能进行分页查询吗?我们需要联合多个表进行数据组装,这本身就很耗时啊...
确实,他们说得有道理。为了解决这个问题,我们需要在不改变交互方式的情况下实现数据的分页查询。
以前,GridList 组件的数据是通过 data-source
属性传递给它的,由组件的使用方进行数据处理和传递。但如果每个使用 GridList 的页面都要自己处理分页逻辑,那会变得非常麻烦。
为了提供更舒适的组件使用体验,我们决定在 GridList 组件内部完成分页逻辑。无论数据如何到达,对于 GridList 组件来说,都是通过函数调用的方式进行数据获取。为此,我们引入了一个新的属性 request
,用于处理分页逻辑。
通过这样的改进,我们可以在不影响现有交互方式的前提下,让 GridList 组件自己处理数据分页,从而提升整体的使用便捷性。
request
接受一个类型为 RequestFunc
的函数,该函数的定义如下:
export interface Pagination {
limit: number;
page: number;
}
export interface RequestResult {
data: T[];
total: number;
}
export type RequestFunc = (pagination: Pagination) => Promise> | RequestResult;
通过使用 request
函数,使用方无需手动维护 data
数据或处理分页逻辑。现在只需将数据获取逻辑封装到 request
函数中。
一旦滚动条滚动到底部,就会触发 props.request
函数来获取数据,实现滚动分页加载的效果。
这样的改进使得使用方能够专注于数据获取逻辑,并将其封装到 request
函数中。不再需要手动管理数据和分页逻辑,简化了使用方式,使得整体体验更加简洁和便捷。
除了添加 request
属性以实现分页加载数据,我们还需要进一步优化。尽管这种懒加载的分页加载可以解决网络请求和首屏加载的问题,但随着数据增加,DOM 元素的数量也会不断增加,可能导致页面出现卡顿的情况。
为了解决这个问题,我们可以引入虚拟列表的概念和实现方法。虚拟列表的原理和实现思路已经在网上有很多资料,这里就不再赘述。
虚拟列表的主要目标是解决列表渲染性能问题,并解决随着数据增加而导致的 DOM 元素过多的问题。
虚拟列表的关键在于计算出当前可视区域的数据起始索引 startIndex
和终点索引 endIndex
。GridList 组件本身并不需要关心计算的具体过程,只需要获得 startIndex
和 endIndex
即可。因此,我们可以将虚拟列表的计算逻辑封装成一个自定义 Hook,该 Hook 的作用就是计算当前可视区域的 startIndex
和 endIndex
✨。
通过这样的优化,我们能够更好地处理大量数据的渲染问题,提升页面的性能和流畅度。同时,GridList 组件无需关心具体的计算过程,只需要使用计算得到的 startIndex
和 endIndex
即可 。
在虚拟列表中,只渲染可视区域的 DOM 元素,为了实现滚动效果,我们需要一个隐藏的 DOM 元素,并将其高度设置为列表的总高度。
已知属性:
containerWidth
: 容器宽度,通过 container.clientWidth
获取
containerHeight
: 容器高度,通过 container.clientHeight
获取
itemMinWidth
: item 最小宽度,通过 props.itemMinWidth
获取
itemMinHeight
: item 最小高度,通过 props.itemMinHeight
获取
columnGap
: item 的列间距,通过 props.columnGap
获取
rowGap
: item 的行间距,通过 props.rowGap
获取
data
: 渲染数据列表,通过 props.dataSource
/props.request
获取
scrollTop
: 滚动条偏移量,通过 container.addEventListener('scroll', () => {...})
获取
计算属性:
渲染列数 columnNum
: Math.floor((containerWidth - itemMinWidth) / (itemMinWidth + columnGap)) + 1
渲染行数 rowNum
: Math.ceil(data.length / columnNum)
列表总高度 listHeight
: Math.max(rowNum * itemMinHeight + (rowNum - 1) * rowGap, 0)
可见行数 visibleRowNum
: Math.ceil((containerHeight - itemMinHeight) / (itemMinHeight + rowGap)) + 1
可见 item 数 visibleCount
: visibleRowNum * columnNum
起始索引 startIndex
: Math.ceil((scrollTop - itemMinHeight) / (itemMinHeight + rowGap)) * columnNum
终点索引 endIndex
: startIndex + visibleCount
列表偏移位置 startOffset
: scrollTop - (scrollTop % (itemMinHeight + rowGap))
通过以上计算,我们可以根据容器尺寸、item 最小尺寸、间距和滚动条位置来计算出虚拟列表的相关参数,以便准确渲染可见区域的数据。这样的优化能够提升列表的渲染性能,并确保用户在滚动时获得平滑的体验。
//vue依赖引入
export const useVirtualGridList = ({
containerRef,
itemMinWidth,
itemMinHeight,
rowGap,
columnGap,
data,
}: VirtualGridListConfig) => {
const phantomElement = document.createElement('div');
//...phantomElement布局
const containerHeight = ref(0);
const containerWidth = ref(0);
const startIndex = ref(0);
const endIndex = ref(0);
const startOffset = ref(0);
/** 计算列数 */
const columnNum = computed(
() => Math.floor((containerWidth.value - itemMinWidth.value) / (itemMinWidth.value + columnGap.value)) + 1
);
/** 计算行数 */
const rowNum = computed(() => Math.ceil(data.value.length / columnNum.value));
/** 计算总高度 */
const listHeight = computed(() =>
Math.max(rowNum.value * itemMinHeight.value + (rowNum.value - 1) * rowGap.value, 0)
);
/** 可见行数 */
const visibleRowNum = computed(
() => Math.ceil((containerHeight.value - itemMinHeight.value) / (itemMinHeight.value + rowGap.value)) + 1
);
/** 可见item数量 */
const visibleCount = computed(() => visibleRowNum.value * columnNum.value);
watch(
() => listHeight.value,
() => {
phantomElement.style.height = `${listHeight.value}px`;
}
);
watchEffect(() => {
endIndex.value = startIndex.value + visibleCount.value;
});
const handleContainerResize = () => {
nextTick(() => {
if (containerRef.value) {
containerHeight.value = containerRef.value.clientHeight;
containerWidth.value = containerRef.value.clientWidth;
}
});
};
const handleScroll = () => {
if (!containerRef.value) {
return;
}
const scrollTop = containerRef.value.scrollTop;
const startRowNum = Math.ceil((scrollTop - itemMinHeight.value) / (itemMinHeight.value + rowGap.value));
/** 计算起始索引 */
startIndex.value = startRowNum * columnNum.value;
/** 计算内容偏移量 */
startOffset.value = scrollTop - (scrollTop % (itemMinHeight.value + rowGap.value));
};
onMounted(() => {
if (containerRef.value) {
containerRef.value.appendChild(phantomElement);
containerRef.value.addEventListener('scroll', (event: Event) => {
event.preventDefault();
handleScroll();
});
handleScroll();
}
});
return { startIndex, endIndex, startOffset, listHeight };
};
这段代码实现了虚拟网格列表的核心逻辑,通过监听容器的滚动和大小改变事件,实现了仅渲染可见区域的列表项,从而提高性能。
在代码中,我们创建了一个 phantomElement
占位元素,其高度被设置为列表的总高度,以确保滚动条的滚动范围与实际列表的高度一致。这样,在滚动时,我们可以根据滚动位置动态计算可见区域的起始和结束索引,并只渲染可见的列表项,避免了不必要的 DOM 元素渲染,从而提升了性能。
在代码中,phantomElement
被创建为绝对定位的元素,并设置了其位置属性和高度。通过 watch
监听器,它的高度会根据列表的总高度进行更新,以保持与实际列表的高度一致。
通过利用占位元素,我们成功实现了虚拟列表的滚动渲染,减少了不必要的 DOM 元素渲染,从而显著提升了用户体验和性能表现。✨
在GridList
中使用useVirtualGridList
:
No Data
{{ item }}
0" class="bottom">
一次性加载十万条数据
分页加载,每页加载一万条
如果觉得GridList
对你有所帮助或启发,希望你能点赞/收藏/评论!
2023年, 前端路上的开源总结(最新更新)
低代码平台组件间通信方案复盘
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)