前端大屏渲染——虚列
发布时间
阅读量：
阅读量
当从后端一次性获取大量数据并用于页面渲染时，随后进行页面操作可能会引发页面崩溃的问题，此时可采用虚拟列表的方案来实现页面渲染。
虚拟列表并非将全部数据一次性渲染至页面中，而是仅对当前可视区域内的内容进行渲染，当用户进行滚动操作时，再动态加载后续内容，从而确保虚拟列表中所涉及的DOM元素数量始终保持在设定范围内。
以下展示了一个简易的虚拟列表实现方式
<html>
<head>
</head>
<body ref="parent">
<div id="divWrap" ref="wrap" class="divWrap">
<div id="container" ref="container" :style="{height:this.list.length*150+'px'}">
<div class="box" :style="{top:(startIndex*boxHeight+'px')}">
<div class="item" v-for="(item,index) in sliceList" >{{item}}</div>
全部评论 (0)
还没有任何评论哟~