实现思路
在讲解下面的内容之前，先对虚拟列表做一个简单的定义。
因为 DOM 元素的创建和渲染需要的时间成本很高，在大数据的情况下，完整渲染列表所需要的时间不可接收。其中一个解决思路就是在任何情况下只对「可见区域」进行渲染，可以达到极高的初次渲染性能。
虚拟列表指的就是「可视区域渲染」的列表，重要的基本就是两个概念：
可滚动区域：假设有 1000 条数据，每个列表项的高度是 30，那么可滚动的区域的高度就是 1000 * 30。当用户改变列表的滚动条的当前滚动值的时候，会造成可见区域的内容的变更。
可见区域：比如列表的高度是 300，右侧有纵向滚动条可以滚动，那么视觉可见的区域就是可见区域。
实现虚拟列表就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下：
计算当前可见区域起始数据的 startIndex
计算当前可见区域结束数据的 endIndex
计算当前可见区域的数据，并渲染到页面中
计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset，并设置到列表上
建议参考下图理解一下上面的步骤：
image
最简单的例子
这个章节会讲述如何把上面步骤变成代码，让这个逻辑在浏览器里真正的运行起来。
为了让这个例子足够简单，做了一个设定：每个列表项的高度都是 30px。在这个约定下，核心 JavaScript 代码不超过 10 行，但是可以完整的实现可见区域的渲染和更新。
我们首先要考虑的是虚拟列表的 HTML、CSS 如何实现，添加了这么几个样式：
列表元素（.list-view）使用相对定位
使用一个不可见元素（.list-view-phantom）撑起这个列表，让列表的滚动条出现
列表的可见元素（.list-view-content）使用绝对定位，left、right、top 设置为 0
<template>
<div class="list-view" @scroll="handleScroll">
<div class="list-view-phantom" :style="{height: contentHeight }"></div>
<div ref="content" class="list-view-content">
<div class="list-view-item" :style="{height: itemHeight + 'px'}" v-for="item in visibleData">
{{ item.value }}
</div>
</div>
</div>
</template>
<style>
.list-view {
height: 400px;
overflow: auto;
position: relative;
border: 1px solid #aaa;
}
.list-view-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: -1;
}
.list-view-content {
left: 0;
right: 0;
top: 0;
position: absolute;
}
.list-view-item {
padding: 5px;
color: #666;
line-height: 30px;
box-sizing: border-box;
}
</style>
<script>
export default {
name: 'ListView',
props: {
itemHeight: {
type: Number,
default: 30
}
},
computed: {
contentHeight() {
return this.data.length * this.itemHeight + 'px';
}
},
mounted() {
console.log(this.$el.clientHeight)
for (var i = 0; i < 100; i++) {
this.data.push({
value: "我是长列表" + i
})
}
this.updateVisibleData();
},
data() {
return {
visibleData: [],
data: []
};
},
methods: {
updateVisibleData(scrollTop) {
scrollTop = scrollTop || 0;
const visibleCount = Math.ceil(this.$el.clientHeight / this.itemHeight); // 取得可见区域的可见列表项数量
const start = Math.floor(scrollTop / this.itemHeight); // 取得可见区域的起始数据索引
const end = start + visibleCount; // 取得可见区域的结束数据索引
this.visibleData = this.data.slice(start, end); // 计算出可见区域对应的数据，让 Vue.js 更新
this.$refs.content.style.webkitTransform =
`translate3d(0, ${ start * this.itemHeight }px, 0)`; // 把可见区域的 top 设置为起始元素在整个列表中的位置（使用 transform 是为了更好的性能）
},
handleScroll() {
const scrollTop = this.$el.scrollTop;
console.log(scrollTop)
this.updateVisibleData(scrollTop);
}
}
}
</script>
网友评论