前端大数据量渲染——虚拟列表

当从后端一次性取到成千条数据进行页面渲染,再对页面进行操作很可能导致页面崩溃,这时就可以用虚拟列表的方法,进行页面的渲染。

虚拟列表不会一次性将所有数据都渲染到页面中,而是只渲染可视区域的内容,当鼠标滚动时,再渲染下一波内容,即虚拟列表中的dom元素始终是指定数目的。

以下是一个简单虚拟列表的实现

{{item}}

效果

以下是一个3行4列布局的虚拟列表的实现

{{sliceList[(indexRow-1)*4+(indexCol-1)]}}

效果


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部